Question

我已经在React上工作了几个星期了，虽然我已经掌握了大部分基本语法（道具，状态），但我很难与某些人建立联系。概念，最明显的是在状态发生变化时添加类。我试图建立一个西蒙说游戏，其中包含四个按钮，全部使用Button组件构建。这些最初设置为不透明度为.3且活动状态为false。单击时，状态＆＃34;活动＆＃34;变得正确，但我不能为我的生活弄清楚如何添加一个可以给按钮完全不透明的css类。这是我的代码：

class App extends Component {
  constructor(){
    super();
    this.state = {
      active: false
    }
  }
  handleClick(){
    this.setState({active: !this.state.active})
  }
  renderButtons(i, f){
    return <Button value={i} className="button" id={f} active= {this.state.active} onClick={() => this.handleClick()}/>
  }
  render() {
    return (
      <div className="App">
        {this.renderButtons("red", "buttonRed")}
        {this.renderButtons("blue", "buttonBlue")}
        {this.renderButtons("green", "buttonGreen")}
        {this.renderButtons("yellow", "buttonYellow")}
      </div>
    );
  }
}

我的css：

.button{
  width: 100px;
  height: 45px;
  opacity: .3;
  margin: 0 auto;
  margin-bottom: 30px;
}
#buttonRed{
  background: red;
}
#buttonBlue{
  background: blue;
}
#buttonGreen{
  background: green;
}
#buttonYellow{
  background: yellow;
}

所以，此时此刻，我只想在点击按钮的同时添加一个类，同时仍保持＆＃34;按钮＆＃34;类的组件。有人可以帮忙吗？

Answer 1

React有两种方法可以做到这一点。第一个是由Tudor Ilisoi建议的，它简单地连接字符串。第二种方法是className Object而不是string。这种方式可以说比较简单但需要添加classnames模块。您可以使用npm install --save classnames或yarn add classnames进行安装。您可以使用以下命令导入它：

import classNames from 'classnames';

然后您可以通过以下方式使用它：

<button className={classNames({button: true, active: this.state.active})} />

第一对大括号只是告诉我们正在传递一个动态属性，第二对只是对象的普通JavaScript语法。请注意，该对象由classNames()函数包装。如果我们之前已经宣布过，我们可以轻松地做到：

render(){
    const classes = classNames({
        button: true, // we always want this class
        active: this.state.active, // only add this class if the state says so
     });

     return (
          <button className={classes} />
     );
}

Answer 2

将className="button"更改为className={'button ' + f}

大括号括起来的表达式被评估为javascript，它会产生一个字符串

另请注意，使用花括号语法时，您不必在属性值周围添加双引号""。

解析JSX后，React会生成正确的HTML属性，例如class="button red"。

Answer 3

您是否尝试过，将可选参数传递给renderButtons，检查它并添加到类：

...
 renderButtons(i, f, c){
    var cssClass =  c&&c!=""? "button " + c : "button";   
    return <Button value={i} className={cssClass}  id={f} active= {this.state.active} onClick={() => this.handleClick()}/>
  }
...

在react.js中单击按钮时添加类

3 个答案: