React props = {this.refs.something} undefined

Question

我的APP中有<Modal/>个组件。

Modal有两个方法show()和hide()，我改变了组件的状态。

在我的应用程序中，我有：

<App>
   <Modal ref="modal"/>
   <Menu openModal={this.refs.modal.show}/>
</App>

但是菜单this.props.openModal内部未定义。

有人能解释我为什么吗？

Answer 1

这可能是因为在渲染时， this.refs.modal 尚未定义。

你应该做的是在App组件上有一些状态，然后是一个回调来改变那个状态，它作为道具传递给Modal。

getInitialState: function() {
    return {modalOpen: false};
},
setModalOpen: function(open) {
    this.setState({modalOpen: false});
}
...
render: function () {
    return (
        <App>
            <Modal open={this.state.modalOpen} setOpen={this.setModalOpen}/>
            <Menu openModal={this.setModalOpen}/>
        </App>
    );
}

然后，您可以将模态的状态读作prop，但另请注意，Modal组件应使用回调来设置App组件上的状态，并且仅使用prop，而不是使用它自己的内部状态覆盖它。