javascript関数の中からReactコンポーネント関数を呼び出す方法は？

Question

私はイベント関数にと私は新しいアラートポップアップ（私はreact-portalライブラリを使用しています）を作成したいと思います：

onNewAlert: function(username) { 

    var divModal = (
     <Portal ref={'Portal'+username}> 
       <div id={'div'+username}> 
        <br /><br/ >Alert for {username} 
       </div> 
     </Portal>); 
    ... 
} 

をしかし、その後、私はPortal内にある関数を呼び出す必要があります。私がrender()の機能を持っていれば、これを参照することができますが、私はイベントに参加しています。

javascript関数でオンザフライで作成されたコンポーネントのコンポーネント関数を呼び出す方法はありますか？

Answer 1

portal.openPortal()と呼んでも、イベントハンドラで作成されたコンポーネントはDOMに添付されないため、何もしません。

イベントハンドラ関数でポータルをレンダリングする代わりに、イベントハンドラは、render()をトリガするコンポーネントの状態を変更する必要があります。

onNewAlert: function(username) { 
    this.setState({ showAlert: true }); 
} 

render()機能は、PortalコンポーネントのisOpenedプロパティの状態変数を使用します。

render: function() { 
    return (
     <div> 
      ... 
      <Portal isOpened={this.state.showAlert}> 
       ... 
      </Portal> 
     </div> 
    ); 
}