Javascript React.js-处理哑子级状态的模式？

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

我有三个链接要更改为活动链接，但我不想影响所有链接，我只想影响已单击/活动的链接

有一些问题没有得到回答：过滤出单击了哪个元素的逻辑应该放在哪里？我们如何让孩子们保持沉默呢

以下是我到目前为止得到的信息：

jsFiddle-

var SomeElement=React.createClass({
render:function（）{
返回(
)
}
});
var App=React.createClass（{
点击：功能（e）{
this.setState（{class:“active”}）
},
getInitialState:函数（）{
返回（{class:'}）
},
render:function（）{
返回(
)
}
});
ReactDOM.render(
,
document.getElementById（'容器'）
);

---

提前感谢。

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

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} />

var SomeElement=React.createClass({
类名：函数（）{
返回this.props.active“active”：；
},
render:function（）{
报税表（
)
}
});

---

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

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} />

状态：{
元素1活动：错误，
element2Active:错误，
元素3活动：错误，
}
单击：函数（元素编号）{
var stateUpdate={}，key='element'+elementNumber+'Active'；
stateUpdate[key]=！this.state[key]；
this.setState（stateUpdate）；
}

或者（可能更好）

状态：{
activeElementIndex:0，
}
单击：函数（elementIndex）{
this.setState（{activeElementIndex:elementIndex}）；
}

---

最后，要筛选单击的按钮，可以将参数绑定到回调：

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)} />
)

返回(
)

看起来不错，我喜欢你的解决方案-只是想指出

SomeElement

中的变量是无效代码-因为这是一个对象而不是一个函数，它应该在这样的函数中：

className:function（）{return this.props.active？“active”：“notactive”}，

并用作

this.className（）

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)} />
)