DOMからのReactコンポーネントの支配

Question

私は、2つの小道具：isOpenedとonCloseを持つReactモーダルを作成しました。これはReact内からうまく機能しますが、私のサイト全体が完全にReactではないので、React環境外から自分のモーダルをコントロールできるようにしたいと考えています。

ウィンドウ変数にを設定し、この変数を更新するウィンドウ関数にonCloseを設定していますが、最初のロード時には問題なく動作しますが、これらの変数が更新されるとモーダルコンポーネントは再描画されません。

変数を更新するときにforceUpdateをDOMから呼び出す方法はありますか？それとも、私は完全に間違った方法でこれについて行きますか？

FYI：Reactにサイトを移動させるまで一時的なので、私はハックな解決策に満足しています。

ありがとうございます！

Answer 1

Reactレンダリングサイクルをトリガーする唯一の方法は、コンポーネントの状態を更新することです（またはルート "ReactDOM.render（）"を呼び出すこと）。あなたのケースでは

は、私はあなたが（ここで私はグローバル持つEventEmitterのインスタンスを使用）、「外」から、この状態を更新できるようにするには、あなたのモーダルコンポーネントの親コンポーネントでローカルの状態を追加することができると思う：

var ParentComponent = React.createClass({ 
    getInitialState: function() { 
     return {isOpen: this.props.isOpen || false}; 
    }, 

    componentDidMount: function() { 
     window.eventEmitter.addListener('openModal', this.onOpenModal); 
     window.eventEmitter.addListener('closeModal', this.onCloseModal); 
    }, 

    componentWillReceiveProps: function(nextProps) { 
     this.setState({isOpen: nextProps.isOpen}); 
    }, 

    componentWillUnmount: function() { 
     window.eventEmitter.removeListener('openModal', this.onOpenModal); 
     window.eventEmitter.removeListener('closeModal', this.onCloseModal); 
    }, 

    onOpenModal: function() { 
     this.setState({isOpen: true}); 
    }, 

    onCloseModal: function() { 
     this.setState({isOpen: false}); 
    }, 

    render: function() { 
     return (
      <Modal isOpen={this.state.isOpen} /> 
     ); 
    }, 
}); 

「外部から」更新する必要があるため、ここではローカルの状態が必要です。この状態は、アプリのReact部分の中で正しく動作するために、 "isOpen"という小道具から更新されます。しかし、 "React-only"アプリでは、 "isOpen"小道具で十分です（ローカル状態は必要ありません）。