在不使用状态的情况下响应组件的更改类答案

【问题标题】：React change class of component without using state在不使用状态的情况下响应组件的更改类
【发布时间】：2020-12-23 16:08:51
【问题描述】：

如何在不使用状态或任何第三方库的情况下更改 div 的类名或样式？假设我点击了一个按钮，我需要更改 div 的背景颜色，我该怎么做？

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

【问题讨论】：

为什么不使用状态？
在反应中做到这一点的正确方法是使用状态
如果你不想使用 state 那么为什么要使用 react 你可以用 javascript 来做到这一点主要的一点是 react 对 state 很好，它处理得很好，所以为什么不使用 state
@Chandan 原因是因为我正在处理页面上的大量数据，如果用户不断激活和停用导航栏，页面将重新呈现数百次
您可以将导航栏移动到另一个组件的状态，而不是您可以更改状态并且不会影响其他组件是否无法将导航栏移动到另一个组件

标签： reactjs

【解决方案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

【讨论】：