Reactjs 如何设置React中动态生成的项的状态？

我正在从服务器获取一些数据以填充项目列表，我想更改单击的项目的类别。但是，由于每个组件的状态都是单数的，因此它会更新每个项上的类。如何将其限制为仅单击的项目？代码如下。谢谢

let Item = React.createClass({
  getInitialState() {
    return { isItemOpen: false };
  },

  handleClick() {
   this.setState({ isItemOpen: !this.state.isItemOpen });
  },

  render() {
    let items = this.props.data.map((item) => {
      let itemClass = this.state.isItemOpen ? 'video-item open' : 'video-item';

      return (
          <article className={ itemClass } onClick={ this.handleClick }>
            <h1>{item.title}</h1>
            <p>{item.content}</p>
          </article>
      )
    });

    return (
      <div className="video-items">
        {videoItems}
      </div>
    )
  }
});

let Item=React.createClass({
getInitialState（）{
返回{isItemOpen:false}；
},
handleClick（）{
this.setState（{isItemOpen:！this.state.isItemOpen}）；
},
render（）{
让items=this.props.data.map（（item）=>{
让itemClass=this.state.isItemOpen？'video item open'：'video item'；
返回(
{item.title}
{item.content}

)
});
返回(
{videoItems}
)
}
});

更好的策略可能是保存所单击项目的

id

或

标题

（某些唯一值）。然后将项目

id

保持在状态，而不是在循环期间无法区分的布尔值。像这样的东西应该适合你：

let Item = React.createClass({
  getInitialState() {
    return { itemOpened: -1 };
  },

  handleClick(id) {
   this.setState({ itemOpened: id });
  },

  render() {
    let items = this.props.data.map((item) => {
      let itemClass = (this.state.itemOpened === item.id) ? 'video-item open' : 'video-item';

      return (
          <article className={ itemClass } onClick={ this.handleClick.bind(this, item.id) }>
            <h1>{item.title}</h1>
            <p>{item.content}</p>
          </article>
      )
    });

    return (
      <div className="video-items">
        {items}
      </div>
    )
  }
});

let Item=React.createClass({
getInitialState（）{
返回{itemOpened:-1}；
},
handleClick（id）{
this.setState（{itemOpened:id}）；
},
render（）{
让items=this.props.data.map（（item）=>{
让itemClass=（this.state.ItemOpen==item.id）？“视频项目打开”：“视频项目”；
返回(
{item.title}
{item.content}

)
});
返回(
{items}
)
}
});