小编Ian*_*ger的帖子

我已经在React上工作了几个星期了,虽然我已经掌握了大部分基本语法(道具,状态),但我很难与一些概念建立联系,最明显的是当一个状态时添加类已经改变.我正在尝试构建一个simon游戏,它包含四个按钮,全部使用Button组件构建.这些最初设置为不透明度为.3且活动状态为false.单击时,状态"活动"变为真,但我不能为我的生活弄清楚如何添加一个可以给按钮完全不透明的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;
} …

你如何在 React 页面加载时找到整个文档的高度？所以在 jQuery 中它看起来像：

$(document).height();

谢谢你的帮助！