javascript - 在 react 中的两个组件之间共享 Prop /状态

Question

所以我有一个位于主屏幕和应用程序屏幕的全局导航栏组件以及一个音乐播放组件。单击导航栏中的一项后，我想将音乐组件上的某些内容静音。

目前，我正在使用 state 来静音音乐等。

所以我得到这个设置的方法是将对象作为 Prop 传递并将其设置为状态，如下所示:

const obj = {
  playing: false,
  toggleButtonText: 'Play',
  muteActive: false,
};

然后我将其作为 props 传递到我的组件中:

<Router>
  <div>
    <Nav stateVal={obj} />
    <Route exact path="/" render={() => <Start />} />
    <Route path="/app" render={() => <App stateVal={obj} />} />
    <Modal />
  </div>
</Router>

然后在我的每个组件中，我会:

constructor(props) {
    super(props);
    this.state = this.props.stateVal;
}

因此 props 被设置为组件的状态。

我的问题是我想要一个组件更新 props 并更新另一个组件的 state 但我不知道我要怎么做那个？

谁能给我一点帮助或指点？

Answer 1

在构造函数中将 props 分配给 state 是一种反模式，因为如果 props 稍后发生变化，那么 state 就不会改变。

让组件更新父级的 props，然后将 props 传递给另一个子级。

如果由于某种原因你不能这样做，那么你应该研究 Redux、Flux 或 MobX 来处理状态。

例子

class Parent extends React.Component {
    setMusicActive = (muteActive) => {
        this.setState({ muteActive });
    }
    <ChildOne muteActive={this.state.muteActive} setMusicActive={this.setMuteActive} />
    <ChildTwo muteActive={this.state.muteActive} setMusicActive={this.setMuteActive} />
}

class ChildOne extends React.Component {
    someOtherFunction = () => {
        this.props.setMuteActive(!this.props.muteActive);
    }
}

在一个地方更新值，您可以在 child 中使用它。