由于列表项上没有任何标识符，因此您每次都激活/停用它们。您需要以不同的方式引用它们中的每个，然后可以分别设置颜色。这是一个例子
var List = React.createClass({ getInitialState: function(){ return { active: null} }, toggle: function(position){ if (this.state.active === position) { this.setState({active : null}) } else { this.setState({active : position}) } }, myColor: function(position) { if (this.state.active === position) { return "blue"; } return ""; }, render: function () { return ( <div> <li style={{background: this.myColor(0)}} onClick={() => {this.toggle(0)}}>one</li> <li style={{background: this.myColor(1)}} onClick={() => {this.toggle(1)}}>two</li> <li style={{background: this.myColor(2)}} onClick={() => {this.toggle(2)}}>three</li> </div> ); }});ReactDOM.render( <List/>, document.getElementById('app'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="app"> <!-- This div's content will be managed by React. --></div>
