Question

我创建了一个React模式，它有两个道具：isOpened和onClose。这在React中运行良好，但是我的整个站点还没有完全React，所以我希望能够从React环境之外控制我的模态。

我已将isOpened设置为窗口变量，并将onClose设置为更新此变量的窗口函数，这在第一次加载时工作正常，但当然这些变量更新后我的模态组件不会重新渲染。

当我更新变量时，有没有办法从DOM调用forceUpdate？或者我是以完全错误的方式解决这个问题？

仅供参考：我很高兴找到一个hacky解决方案，因为这是暂时的，直到我完成将我的网站移动到React。

谢谢！

Answer 1

触发React渲染周期的唯一方法是更新组件的状态（或调用root＆＃34; ReactDOM.render（）＆＃34;）。

在您的情况下，我认为您可以在Modal组件的父组件中添加本地状态，以便能够从＆＃34;外部＆＃34;更新此状态。（这里我使用了一个全局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} />
        );
    },
});

请注意，此处仅需要本地状态，因为您希望从外部更新＆＃34;＆＃34;。此状态也从prop＆＃34; isOpen＆＃34;更新。为了在您的应用程序的React部分内正常工作。但是在＆＃34; React-only＆＃34; app，＆＃34; isOpen＆＃34;道具就够了（不需要当地的州）。

从DOM控制React组件道具

1 个答案: