React.js - 处理愚蠢儿童状态的模式？

Question

我试图通过从父级传递状态来保持我的组件纯净（状态存在于正在更改的组件之外）。

我想将三个链接更改为活动链接，但我不想影响所有链接，我只想影响被点击/活动的链接。

有些问题没有得到解答：过滤掉哪个元素被点击的逻辑应该放在哪里？我们如何通过让孩子保持沉默来做到这一点？

这是我目前得到的：

jsFiddle - https://jsfiddle.net/69z2wepo/33470/

var SomeElement = React.createClass({
  render: function() {
    return(
      <a className={this.props.className} onClick={this.props.onClick} href="#">Click Me!</a>
    )
  }
});

var App = React.createClass({  
  click: function(e) {
    this.setState({class: "active"})
  },
  getInitialState: function() {
    return({class: ""})
  },
  render: function() {
    return(
      <div>
        <SomeElement className={this.state.class} onClick={this.click} />
        <SomeElement className={this.state.class} onClick={this.click} />
        <SomeElement className={this.state.class} onClick={this.click} />
      </div>
    )
  }
});

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

提前致谢。

Answer 1

首先，当元素处于活动状态时使用的类的名称应该在元素内部。父组件不应该知道这一点：

var SomeElement = React.createClass({
  className: function() {
    return this.props.active ? "active" : "";
  },
  render: function() {
    return (        
      <a className={this.className()} onClick={this.props.onClick} href="#">Click Me!</a>
    )
  }
});

<SomeElement active={true,false} onClick={this.click} />

---

下一点取决于您希望如何表示应用程序的状态。我举两个例子：

state: {
  element1Active: false,
  element2Active: false,
  element3Active: false,
}

click: function(elementNumber) {
  var stateUpdate = {}, key = 'element' + elementNumber + 'Active';
  stateUpdate[key] = !this.state[key];
  this.setState(stateUpdate);
}

<SomeElement active={this.state.element1Active} onClick={this.click} />

或者（可能更好）

state: {
  activeElementIndex: 0,
}

click: function(elementIndex) {
  this.setState({activeElementIndex: elementIndex});
}

<SomeElement active={this.state.activeElementIndex === 0} onClick={this.click} />

---

最后，要过滤点击了哪个按钮，您可以将参数绑定到回调：

return(
  <SomeElement active={this.state.activeElementIndex === 0} onClick={this.click.bind(this, 0)} />
  <SomeElement active={this.state.activeElementIndex === 1} onClick={this.click.bind(this, 1)} />
  <SomeElement active={this.state.activeElementIndex === 2} onClick={this.click.bind(this, 2)} />
)