ReactJS：控制孩子和父母的子女状态

>让孩子“受控”,就像一个带有值和onChange属性的表单输入,其中输入的所有者控制输入.
>让孩子“不受控制”,就像没有值的表单输入.

第二选择似乎比前面更快,但就像在React中管理表单输入的集合一样,使用完全控制的组件的优点变得显而易见,因为复杂性的构建和需要在任何时间点上完全描述您的UI. (见FakeRainBrigand的this excellent answer,如果您好奇,为什么受控组件在多数情况下比不受控制的要好)

然而,就像表单输入一样,没有理由不能控制或不控制您的组件.如果用户传递显示和onClose属性(如Austin Greco’s answer),则具有受控模式,父级会完全决定何时显示或隐藏模态.

如果用户没有,您可以跳过使用属性,而是转换为在模态组件上由公共方法管理的内部状态：

var ParentThing = React.createClass({
  ...
  render: function() {
    return <Modal ref="modal" />;
  },handleSomeClick: function() {
    this.refs.modal.open();
  }
});

var Modal = React.createClass({
  setInitialState: function() {
    return {
      display: false
    }
  },render: function() {
    return (
      <div className={this.state.display ? "show" : "hide"}>
        <a className="close" onClick={this.close}>&times;</a>
      </div>
    )
  }
});

如果您喜欢受控Modal组件的想法,但不想做所有的样板打字,甚至可以实现像Modal这样的valueLink属性来简化此模式.

var ParentThing = React.createClass({
  ...
  mixins: [React.addons.LinkedStateMixin],getInitialState: function() {
    return { showModal: false };
  },render: function() {
    return <Modal displayLink={this.linkState("showModal")} />;
  },handleSomeClick: function() {
    this.setState({showModal: true});
  }
});

var Modal = React.createClass({
  close: function() {
    this.props.displayLink.requestChange(false);
  },render: function() {
    return (
      <div className={this.props.displayLink.value? "show" : "hide"}>
        <a className="close" onClick={this.close}>&times;</a>
      </div>
    )
  }
});

(见my blog post on creating custom components that work with linkState/valueLink for more info)

所以现在,您可以使用完全由父控制的Modal获得好处,但是您已经删除了一部分样板,创建了将该值设置为false并将其传递给模态的函数.