React Props = {this.refs.something}は未定義です

Question

私はAPPに<Modal/>コンポーネントを持っています。

Modalには、コンポーネントの状態を変更する2つのメソッド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> 
    ); 
} 

あなたはその後、小道具としてモーダルの状態を読み取ることができますが、それだと、ノートもモーダル・コンポーネントは、それを、アプリケーションコンポーネントに状態を設定し、唯一の小道具を使用するコールバックを使用しないでオーバーライドする必要があることを

自身の内部状態。