React.js - 处理哑 children 状态的模式？

Question

我试图让我的组件保持纯净（状态存在于正在变化的组件之外）- 通过从 parent.

传递状态

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

一些未解决的问题：过滤掉点击的元素的逻辑应该放在哪里？我们如何通过保持 children 哑巴来做到这一点？

这是我目前得到的：

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

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

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

React.js - 处理哑 children 状态的模式？

React.js - Pattern for handling dumb children state?

html

javascript

jquery

reactjs

react-router