如何在反应项目中切换div上的类以在移动设备中打开移动菜单

Question

这是我当前的代码，显示了一个汉堡包菜单。

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

我想添加一个新课程＆＃34; open＆＃34;到现有的班级＆＃34; navlines＆＃34;。 我该怎么做才能做出反应。 我刚刚开始学习几天前的反应。

Answer 1

就像在HTML中一样。

<div className="navlines open">

如果你想根据某些条件动态地做到这一点

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

Answer 2

你可以使用这样的东西

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

当showHamburgerMenu的值为true时，将添加open类，否则将关闭class。

您可以使用道具或来自状态，即

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

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

小提琴 https://jsfiddle.net/jbh1qgzu/1/