有没有办法使用 useState 钩子在反应中切换类名?

Question

我正在尝试实现一个垂直省略号，用户可以单击它(切换(并选择他们想要执行的操作。

但是，我知道不允许在反应中直接操作 DOM。因为尝试切换类列表会引发错误 - 类型错误：无法读取 null 的属性"类列表"。

如何使用 useState 钩子在切换时添加/删除类名？

Answer 1

标准公平：

const [toggleClass, setToggleClass] = useState(false)
return <div className={toggleClass ? 'some-class' : ''} /> 

使用模板文本：

const [toggleClass, setToggleClass] = useState(false)
return <div className={`some-class ${toggleClass ? 'some-class' :''}`} /> 

使用流行的类名包：

import cx from 'classnames'
const Component = () => {
const [toggleClass, setToggleClass] = useState(false)
return <button className={cx('btn', {
'btn--primary': toggleClass
})}>Submit</button>
}