Блог

Главная - Вопросы по программированию - Реагирует на изменение класса компонента без использования состояния

Реагирует на изменение класса компонента без использования состояния

#reactjs

#reactjs

Вопрос:

Как я могу изменить имя класса или стиль div без использования state или каких-либо сторонних библиотек? Допустим, я нажимаю на кнопку, и мне нужно изменить цвет фона div, как я могу это сделать?

 <Affix onChange={() => change css or class} offsetTop={60}>
<div>...</div> // Change css of this div
</Affix>

Комментарии:

1. почему не использовать state?

2. правильный способ сделать это в react — использовать state

3. если вы не хотите использовать state, тогда зачем использовать react, вы можете сделать это с помощью javascript, главное, чтобы react хорошо работал с state и хорошо справлялся с этим, так почему бы не использовать state

4. @Chandan причина в том, что я имею дело с большим объемом данных на странице, и если пользователь продолжает активировать и деактивировать панель навигации, страница будет повторно отображаться сотни раз

5. вы можете переместить панель навигации в другой компонент с его состоянием, чем вы можете изменить состояние и не повлияет на другие компоненты разве невозможно переместить панель навигации в другой компонент

Ответ №1:

Вы можете сделать это вручную, используя state:

 const [myClass, setMyClass] = useState('bgColor-white');

return (
  <Affix onChange={() => setMyClass('bgColor-black')} offsetTop={60}>
    <div className={myClass}>...</div> // Change css of this div
  </Affix>
)

Или вы можете использовать библиотеку, которая обрабатывает динамический стиль. Я использую и рекомендую styled-components

Ответ №2:

Вы можете изменить любой атрибут или свойство компонента (элемента) в React, используя базовые функции javascript.

 onClick={(e) => {
    e.currentTarget.setAttribute("src", newUrl);
}

Изменит изображение в тот момент, когда вы нажмете на него, без использования Ref или State.
event.currentTarget даст вам ссылку на компонент, который запустил этот конкретный React.Событие MouseEventHandler и ссылка на элемент позволяют манипулировать им по своему усмотрению.

Это особенно полезно, когда вам нужно изменить атрибут в компоненте в цикле сопоставления без необходимости отслеживать его.

Редактировать: мой друг только что дал мне лучший вариант для классов в конкретных:

 e.currentTarget.classList.add('my_custom_klass')