Size: a a a

React — русскоговорящее сообщество

2020 November 19

Д

Денис in React — русскоговорящее сообщество
Yavar Mammadov
Всем привет, ребята такой вопрос. При клике на кнопку я должен показать таблицу и при обратном клике закрыть таблицу, я сделал это с помощью useState, но при каждом клике у меня компонент вызывается / ре-рендрится. как можно сделать так чтоб при клике компонент не вызывалась ? Спасибо

const SystemDetails = ({ data }) => {

 console.log('data', data) // Object

 const [isOpen, setIsOpen] = useState(false)
 const toggleClassName = () => setIsOpen(!isOpen)
 return (
   <div className="system-details">

       <button
         className="button"
         type="submit"
         onClick={toggleClassName}
         >
         {isOpen ? 'Cancel' : 'Add' }
       </button>

       <div className={isOpen ? 'd-block' : 'd-none'}>
         <SymtemRaw/>
       </div>

   </div>
 )
}
```
Ты рендерить должен компонент с родителя
источник

YM

Yavar Mammadov in React — русскоговорящее сообщество
Денис
Ты рендерить должен компонент с родителя
так это и есть родительский компонент
источник

BB

Bugs Bunny in React — русскоговорящее сообщество
Yavar Mammadov
Всем привет, ребята такой вопрос. При клике на кнопку я должен показать таблицу и при обратном клике закрыть таблицу, я сделал это с помощью useState, но при каждом клике у меня компонент вызывается / ре-рендрится. как можно сделать так чтоб при клике компонент не вызывалась ? Спасибо

const SystemDetails = ({ data }) => {

 console.log('data', data) // Object

 const [isOpen, setIsOpen] = useState(false)
 const toggleClassName = () => setIsOpen(!isOpen)
 return (
   <div className="system-details">

       <button
         className="button"
         type="submit"
         onClick={toggleClassName}
         >
         {isOpen ? 'Cancel' : 'Add' }
       </button>

       <div className={isOpen ? 'd-block' : 'd-none'}>
         <SymtemRaw/>
       </div>

   </div>
 )
}
```
переключать через ref и style.display. только чтобы что?
источник

YM

Yavar Mammadov in React — русскоговорящее сообщество
Денис
Ты рендерить должен компонент с родителя
ну учитывая что данные могут расти каждый раз и каждый раз при клике компонент будет подгружать данные, а это не очень хорошо ведь, тормозит будет компонент
источник

YM

Yavar Mammadov in React — русскоговорящее сообщество
Bugs Bunny
переключать через ref и style.display. только чтобы что?
не понял
источник

BB

Bugs Bunny in React — русскоговорящее сообщество
пусть перезагружает. ты испытываешь какие-то проблемы с перфомансом?
источник

BB

Bugs Bunny in React — русскоговорящее сообщество
Yavar Mammadov
не понял
пишешь контейнер в ref и на onClick смотришь, что у него там в style.display (либо отдельным флагом в рефе) и меняешь свойство на противоположное
источник

Д

Денис in React — русскоговорящее сообщество
Bugs Bunny
пишешь контейнер в ref и на onClick смотришь, что у него там в style.display (либо отдельным флагом в рефе) и меняешь свойство на противоположное
Не, ты замудрил)
источник

V

Vlad in React — русскоговорящее сообщество
Yavar Mammadov
Всем привет, ребята такой вопрос. При клике на кнопку я должен показать таблицу и при обратном клике закрыть таблицу, я сделал это с помощью useState, но при каждом клике у меня компонент вызывается / ре-рендрится. как можно сделать так чтоб при клике компонент не вызывалась ? Спасибо

const SystemDetails = ({ data }) => {

 console.log('data', data) // Object

 const [isOpen, setIsOpen] = useState(false)
 const toggleClassName = () => setIsOpen(!isOpen)
 return (
   <div className="system-details">

       <button
         className="button"
         type="submit"
         onClick={toggleClassName}
         >
         {isOpen ? 'Cancel' : 'Add' }
       </button>

       <div className={isOpen ? 'd-block' : 'd-none'}>
         <SymtemRaw/>
       </div>

   </div>
 )
}
```
React.memo
источник

BB

Bugs Bunny in React — русскоговорящее сообщество
Денис
Не, ты замудрил)
ты посмотри на кондишен в style
источник

BB

Bugs Bunny in React — русскоговорящее сообщество
вернее в className
источник

BB

Bugs Bunny in React — русскоговорящее сообщество
ну можно класс туглить, а не style
источник

@.

@Dragos . in React — русскоговорящее сообщество
Привет. Подскажите пожалуйста - вроде везде все правильно - но вместо редактирования именно 1го элемента - добавляет новый элемент в конец списка.
https://codesandbox.io/s/immutable-dew-io2oq?file=/src/App.js
источник

Д

Денис in React — русскоговорящее сообщество
Bugs Bunny
ну можно класс туглить, а не style
Да
источник

BB

Bugs Bunny in React — русскоговорящее сообщество
ну тогда там в рефе надо смотреть на classList и плясать от этого
источник

Д

Денис in React — русскоговорящее сообщество
Bugs Bunny
ну тогда там в рефе надо смотреть на classList и плясать от этого
нет, нужно className={toogleClass}
источник

BB

Bugs Bunny in React — русскоговорящее сообщество
ему же не нужен ререндер
источник

Д

Денис in React — русскоговорящее сообщество
ну как нужно... Я так делаю)
источник

Д

Денис in React — русскоговорящее сообщество
ааа
источник

BB

Bugs Bunny in React — русскоговорящее сообщество
он написал, что не нужно
источник