Javascript 从完全独立的组件更新react组件

我正在寻找一种方法，根据对另一个组件的输入重新加载一个react组件。我正在使用react with Flux/Redux，并且已经对项目做出了足够的承诺，我认为这不是我目前可以采取的方向

我想做的事情有点像这样：

class Component1 extends React.Component{
    constructor(props){
        super(props);

        window.global = 0;
        this.state = {};

        this.changeGlobal = this.changeGlobal.bind(this);
    }

     changeGlobal(value){
         window.global = value;
    }

    render(){

        return (<div> 
                <a onClick={() => changeGlobal(1)}>One</a>
                <a onClick={() => changeGlobal(2)}>Two</a>
               <a onClick={() => changeGlobal(3)}>Three</a>
               </div>);
    }
}


class Component2 extends React.Component
{
    constructor(props){
        super(props);
        this.state = {};
    }

    render(){

        if(window.global === 0){
             return <Something/>;
        }

        if(window.global === 1){
             return <SomethingElse/>;
        }

        etc...
    }
}

---

除了我希望Component2在每次全局值被Component1更改时重新运行。有人知道如何做到这一点吗

Redux的实现完全是除了React之外的，它意味着你可以在任何时候实现它，不管你想怎么做，对于你只想实现的组件来说，它既不是最好的编写代码，也不是最佳实践，但仍然是一种可能，只是说。如果你想正确地更新一个组件，同时也要对其进行修改，你需要修改组件的状态，否则，即使你将一个值从一个组件传递到另一个组件，这些修改也永远不会被渲染

---

我不是这方面的专家，但我的建议是将Component2的状态链接到它的道具，这样它就可以被外部组件修改。最常见的方法是将两个组件包装到父组件中，然后，每当Component1中的值发生更改时，它将触发一个事件或函数，该事件或函数将由父组件处理，然后，后者将通过其道具将该值传递给Component2，并可能触发一个函数，该函数将更改Component2的状态。

我使用事件实现了这一点：

class Component1 extends React.Component{
    constructor(props){
        super(props);

        this.state = {};

        this.changeGlobal = this.changeGlobal.bind(this);
    }

    changeGlobal(value){
        var event = new CustomEvent('myEvent', { detail: value });
        document.body.dispatchEvent(event);
    }

    render(){

        return (<div> 
                <a onClick={() => changeGlobal(1)}>One</a>
                <a onClick={() => changeGlobal(2)}>Two</a>
               <a onClick={() => changeGlobal(3)}>Three</a>
               </div>);
    }
}


class Component2 extends React.Component
{
    constructor(props){
        super(props);
        this.state = {};

        this.handleEvent = this.handleEvent.bind(this);
    }

    handleEvent(event) {
        this.setState({ value: event.detail});
    }

    componentDidMount() {
        document.body.addEventListener('myEvent', this.handleEvent, false);
    }

    componentWillUnmount() {
        document.body.removeEventListener('myEvent', this.handleEvent, false);
   }

    render(){

        if(this.state.value === 0){
             return <Something/>;
        }

        if(this.state.value === 1){
             return <SomethingElse/>;
        }

        etc...
    }
}

---

他们需要有一个包含共享状态的共享父组件，并将其作为道具传递给Component2。Component1将通过作为道具传递的函数更新父组件状态，这将导致将新道具传递给Component2以重新呈现。您需要删除addEventListener和removeEventListener中的箭头函数。handleEvent已绑定到组件实例，removeEventListener需要传递添加到addEventListener上的实际函数。