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

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

1 个答案: