從DOM控制React組件道具

Question

我有一個React模式，我創建了兩個道具：isOpened和onClose。這在React中可以正常工作，但是我的整個站點並不是完全React，所以我希望能夠從React環境之外控制我的模態。

我已經設置isOpened到窗口變量，onClose到更新此變量的窗口功能，並能正常工作第一次加載，但當然，當這些變量更新我的模態分量不重渲染。

當我更新我的變量時，有沒有辦法從DOM調用forceUpdate？還是我完全用錯誤的方式去解決這個問題？

僅供參考：我很高興爲您提供一個解決方案，因爲這是暫時的，直到我可以將我的網站移動到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} /> 
     ); 
    }, 
}); 

請注意，這裏只需要本地狀態，因爲您想從「外部」更新它。此狀態也從prop「isOpen」更新，以便在應用程序的React部分內正常工作。但是在「React-only」應用程序中，「isOpen」道具就足夠了（不需要本地狀態）。