在React中有两种方法可以处理这种事情：

1. 使孩子“受控制”，就像带有value和onChange属性的表单输入一样，其中输入的 所有者 控制输入​​。
2. 使孩子“不受控制”，就像不带的表单输入一样value。

第二种选择似乎更快，但是就像在React中管理一组表单输入一样，随着构建复杂性以及在 任何 时间点和 任何
时间完全描述UI的需求，使用完全受控组件的优势变得显而易见。

但是，就像表单输入一样，没有理由不能控制_或_不受控制。如果用户通过display和onClose属性，例如AustinGreco的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
    }
  },
  close: function() {
    this.setState({ display: false });
  },
  open: function() {
    this.setState({ display: true });
  },
  render: function() {
    return (
      <div className={this.state.display ? "show" : "hide"}>
        <a className="close" onClick={this.close}>&times;</a>
      </div>
    )
  }
});

如果您喜欢受控Modal组件的想法，但又不想进行所有样板输入，则您甚至可以valueLink为Modal 实现类似属性的功能以简化此模式。

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

（有关更多信息，linkState``valueLink请参阅我的博客文章有关创建与/
一起使用的自定义组件的信息。）

因此，现在您可以获得使用完全由父级控制的模态的好处，但是您删除了创建可将值设置为false并将其传递给模态的函数的部分样板。