Javascript 在react中的两个组件之间共享道具/状态

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

目前，为了使音乐静音，我正在使用state

所以我得到这个设置的方法是通过一个对象作为道具，并将其设置为如下状态：

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>

因此，道具被设置为组件的状态

我的问题是，我希望一个组件更新另一个组件的

道具

，并更新另一个组件的

状态

，但我不知道该怎么做

---

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

在构造函数中将道具分配给状态是一种反模式，因为如果道具稍后更改，那么状态就不会更改

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

如果出于某种原因无法做到这一点，那么应该研究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);
    }
}

类父级扩展React.Component{
setMusicActive=（静音活动）=>{
this.setState（{muteActive}）；
}
}
类ChildOne扩展了React.Component{
someOtherFunction=（）=>{
this.props.setMuteActive（！this.props.muteActive）；
}
}

---

在一个位置更新值，您可以在子项中使用它。

我不明白为什么您需要将道具设置为当前状态？道具是可以改变的，而你似乎没有处理好这一点。但是，如果我正确理解了设计模式，这就是Redux或类似工具的例子，因为你真的试图从叶节点组件管理全局状态。我读过关于Redux@ChidG的文章，但我的应用程序太小了，以至于我认为它太过复杂了，就像它实际上只是一个主屏幕、音乐播放组件和导航条一样，也许这对你的应用来说是过度的。否则，您将需要在一个父组件上设置道具，该组件将封装需要连接的两个子组件，并按照Martin的回答将道具传递给它们。@ChidG Ah干杯！是的，目前它们还没有封装在一个单独的组件中，所以我想这就是我所缺少的。我还是一个新手，仍然在学习。如何让组件更新父组件的道具？这就是我正在努力的地方with@PourMeSomeCode增加了一个例子。如果您只使用像示例中那样的简单设置，那么Redux可能是过度杀伤力了。如果您必须将函数传递给多个孙子来执行此操作，那么可能是时候进行Redux了

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);
    }
}