reactjs - how to toggle a class on a div in react project for opening a mobile menu in mobile

Question

This is my current code which shows up a hamburger menu.

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

I want to add a new class "open" to the existing class "navlines". how can i do this in react. i just started learning react a few days ago.

score 1 · Accepted Answer

就像在 html 中一样。

<div className="navlines open">

如果您想根据某些条件动态执行此操作，则可以

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

score 1 · Accepted Answer

你可以使用这样的东西

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

当 showHamburgerMenu 的值为 true 时，将添加 open 类，否则将存在 close 类。

您可以使用 from props 或 from state ie

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

根据一些点击或用户操作，您可以将 showHamburgerMenu 的状态设置为 true。

2 回答 2