как переключить класс в div в реактивном проекте для открытия мобильного меню в мобильном телефоне

Question

Это мой текущий код, который показывает меню гамбургера.

 <div className="navlines">
   <span></span>
   <span></span>
   <span></span>
 </div> 

Я хочу добавить новый класс "open" к существующему классу "navlines".Как я могу сделать это в реакции.я только начал учиться реагировать несколько дней назад.

Answer 1

Вы можете использовать что-то вроде этого

<div className={"navlines " + (this.props.showHamburgerMenu ? 'open' : 'close')}>

Когда значение showHamburgerMenu равно true, открытый класс будет добавлен, в противном случае будет доступен закрытый класс.

Вы можете использовать либо изреквизиты или из состояния, т.е.

<div className={"navlines " + (this.state.showHamburgerMenu ? 'open' : 'close')}>

На основании какого-либо щелчка или действия пользователя вы можете установить для состояния showHamburgerMenu значение true.

fiddle https://jsfiddle.net/jbh1qgzu/1/

Answer 2

просто сделайте как в html.

<div className="navlines open">

если вы хотите сделать это динамически на основе какого-либо условия, вы можете

var className = "navlines" + (condition ? " open" : "");
return (<div className={ className } />);