Есть ли способ использовать ловушку useState для переключения className в реагировать?

Question

Я пытаюсь реализовать вертикальный многоточие, при котором пользователи могут щелкнуть по нему (переключить) и выбрать действия, которые они хотят выполнить.

Однако я понимаю, что непосредственное манипулирование DOM в реакции не являетсяразрешается. Потому что попытка переключить classList выдает ошибку - TypeError: Невозможно прочитать свойство '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' :''}`} /> 

Использование популярных имен классов пакета:

import cx from 'classnames'

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

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

}