Question

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

但是，我知道不允许直接在react中操纵DOM。因为尝试切换classList会引发错误-TypeError：无法读取null的属性“ classList”。

如何在切换时使用useState挂钩添加/删除className？

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>

}

有没有一种方法可以使用useState挂钩来在反应中切换className？

1 个答案: