Question

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

目前，要将音乐静音等我使用状态。

所以我设置这个设置的方法是将一个对象作为道具传递并将其设置为如下状态：

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

我将此作为道具传递给我的组件：

<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并更新另一个组件的state，但我不知道我将如何做到这一点？

有人可以给我一些帮助或指示吗？

Answer 1

在构造函数中将props分配给state是一种反模式，因为如果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);
    }
}

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

在两个组件之间共享道具/状态

1 个答案: