reactjs - 有没有办法使用 useState 钩子(Hook)来切换 className 的 react ？

Question

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

但是，我知道在 React 中直接操作 DOM 是不允许的。因为尝试切换 classList 会抛出错误 - TypeError: Cannot read property 'classList' of null。

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

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' :''}`} /> 

使用流行的 classnames包裹:

import cx from 'classnames'

const Component = () => {
    const [toggleClass, setToggleClass] = useState(false)

    return <button className={cx('btn', {
        'btn--primary': toggleClass
    })}>Submit</button>

}