reactjs - 从几个地方操作一个组件实例 ReactJS

Question

我有一个组件实例，应该从不同的地方更新。如何从其他几个组件中更新此组件的 props？

class ParentComponent extends React.Component {

    ...

    render() {
        return (
            <div>
                <ChildComponent someValue={this.state.someValue} />
            </div>
        );
    }
}

class ChildComponent extends React.Component {

    ...

    render() {
        return (
            <div>
                ...
            </div>
        );
    }
}

class AdditionalComponent1 extends React.Component {
// I want to update 'someValue' in ChildComponent
}

class AdditionalComponent2 extends React.Component {
// I want to update 'someValue' in ChildComponent
}

我只需要一个 ChildComponent 实例

Answer 1

// I want to update 'someValue' in ChildComponent

您无法从ChildComponent内更新someValue，因为someValue是作为props传递的，而props应被视为在接收它们的组件内只读。

但是，您可以以某种方式通知 ParentComponent 您想要更新 someValue - 如果 ParentComponent 更新 someValue 那么ChildComponent 也将收到它的新版本(因为 someValue 处于 ParentComponent 的状态)。

如果 AdditionalComponent1 与 ParentComponent 没有“简单”的层次关系(例如兄弟、子组件等)，那么您可以使用观察者模式，其中 ParentComponent 监听有趣的事件，而 AdditionalComponent1 发布此类事件。

More信息。

例如在 ParentComponent 中监听事件并采取行动:

..

comonentDidMount()
{
  // from "anywhere" in your app you can publish event and listen here
  ObserverPatt.listen("eventName", ()=>{
     this.setState({val:0})
  });

}

..