如何将活动的CSS属性添加到R​​eact组件？

Question

我正在尝试添加一些样式，以便当我点击某个项目时它具有不同的背景颜色。

我有一个类App，它导入导入类ItemList的类ItemSection。在ItemSection和ItemList中，我在propTypes中声明了activeItem: React.PropTypes.object.isRequired。

我认为问题出在我App的渲染方法中：

  render(){
return(
  <div className = 'app'>
    <div className = 'manipulateItem'> {/*Need a better className*/}
      <ItemSection
        items = {this.state.items}
        addItem = {this.addItem.bind(this)}
        setItem = {this.setItem.bind(this)}
        deleteItem = {this.deleteItem.bind(this)}
        editItem = {this.editItem.bind(this)}
        activeItem = {this.state.activeItem} /*THIS LINE I BELIEVE*/
      />
    </div>
  </div>
)
}

这是我的追溯：

bundle.js：1251警告：道具类型失败：activeItem中未指定必需道具ItemList。     在ItemList中（由ItemSection创建）     在ItemSection中（由App创建）     在div（由App创建）     在div（由App创建）     在App

Answer 1

您在问题中说明您在propTypes中声明了activeItem: React.PropTypes.object.isRequired，但您明确要求状态对象中的activeItem - activeItem = {this.state.activeItem}。如果要在传递给组件的props中使用activeItem的值，则必须使用this.props.activeItem。

希望这有帮助！