将整个 div 和 onClick 处理程序移动到另一个组件，然后将该组件与数组中的props映射。就像是：

const ChildComponent = ({ condition, handleClick }) => {
  var className = condition ? 'list-row active' : 'inactive';
  return (
    <div className={className} onClick={() => handleClick()}>
      <div>List</div>
    </div>
  )
}

只需在容器中使用此组件：

this.state.data.map((el ,i) => (
  <ChildComponent key={i} condition={this.state.condition} handleClick={() => this.handleClick()} />
))

我不确定您是否希望您的孩子也有状态，但这也很容易实现，使用相同的做法。我强烈建议使用 ES6 语法进行react（箭头函数等），让生活变得如此轻松，而无需跟踪 tthis/self 并将其绑定到任何地方。

如果您只想保持 1 个项目处于活动状态，则可以在您的状态下保留对所选项目的引用。然后您可以编写一个 onClick 回调来更改所选项目。

var MyList = React.createClass({
  getInitialState: function(){
    return {
      data: ['foo', 'bar', 'baz'],
      selected: null
    }
  },

  selectItem: function(el){
    this.setState({selected: el});
  },

  renderItem: function(el){
    var className = this.state.selected === el ? 'active' : 'inactive';
    var onClick = this.selectItem.bind(this, el);
    return <li key={el} className={className} onClick={onClick}>{el}</li>;
  },

  render: function() {
    return (
      <ul>
      { this.state.data.map(this.renderItem) }
      </ul>
     );
  }
});

ReactDOM.render(
  <MyList />,
  document.getElementById('container')
);

如果您希望能够在每个列表项的活动和非活动之间切换，您可以使用相同的方法，但保留一个对象作为您的selected状态：

getInitialState: function(){
    return {
      data: ['foo', 'bar', 'baz'],
      selected: {}
    }
  },

  selectItem: function(el){
    var selected = this.state.selected;
    selected[el] = !selected[el];
    this.setState({selected: selected});
  },

并相应地修改您的renderItem功能：

var className = this.state.selected[el] ? 'active' : 'inactive';
var onClick = this.selectItem.bind(this, el);