在React中有两种方法可以处理这种事情：
- 使孩子“受控制”，就像带有
value
和onChange
属性的表单输入一样，其中输入的 所有者 控制输入。 - 使孩子“不受控制”，就像不带的表单输入一样
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}>×</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}>×</a> </div> ) }});（有关更多信息，
linkState``valuelink请参阅我的博客文章有关创建与/
一起使用的自定义组件的信息。）
因此，现在您可以获得使用完全由父级控制的模态的好处，但是您删除了创建可将值设置为
false并将其传递给模态的函数的部分样板。
