Javascript 当其他组件的状态发生变化时，如何获取

我有一个

settings.js

constructor (props) {
 super(props);

 this.state = { 
   //default settings
   darkTheme: false
 };

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

这是我的

settings.js

构造函数

handleToggle(event) {
 localStorage.setItem('darkTheme', this.state.darkTheme);
 this.setState({darkTheme: !this.state.darkTheme});
}

我喜欢这样的变化

所以我有另一个组件，它叫name

main.js

。我想在黑暗改变时使用，我想从我的

main.js

import Settings from '../containers/settings';
export default class Main extends React.Component {

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

   updateTheme(isDark) {
    // Settings just toggled the theme!
   this.setState({isDark: isDark});
   }

   render() {
    return (
     <MuiThemeProvider muiTheme={ 
      getMuiTheme(isDark === true ? 
      darkBaseTheme : null) }>
      <Paper zDepth={2}>
        <AppBar />
        <List />
      </Paper>
     </MuiThemeProvider>
);

从“../containers/Settings”导入设置；
导出默认类Main扩展React.Component{
建造师（道具）{
超级（道具）；
这个州={
伊斯达克：
}
}
更新时间（isDark）{
//设置刚刚切换了主题！
this.setState（{isDark:isDark}）；
}
render（）{
返回(
);

---

那么最佳实践是什么呢？

实现这一点的方法是让

Main.js

通过道具将函数传递给

Settings.js

Main.js：

updateTheme(isDark) {
  // Settings just toggled the theme!
}

render() {
  ...
  <Settings updateTheme={this.updateTheme} />
  ...
}

---

这取决于两个组件之间的关系： 如果他们像父亲和儿子一样，其中一个包含Antor，那么最好的做法是通过通过道具传递的回调进行连接。

---

如果它们根本不相关，这似乎是使用Redux的典型案例。

这看起来很有用，谢谢你。但如果这样使用，我只使用布尔值。我的设置组件也包括一些jsx，比如视图。所以我必须这样使用？

它的呈现方式也和你在

Main.js中使用的jsx代码相同de>。你能发布你的
Main.js
代码吗？这会帮助我理解你的问题。我已经更新了我的帖子，请看一看。
getMuiTheme（isDark==true？darkBaseTheme:null）}>
我只是这样使用。@UğurErdal好的，谢谢你的帖子。
需要在
Main
的渲染方法中。如果你不能把它放在那里，那么你就必须使用类似Redux的东西来做你想做的事情。
handleToggle(event) {
 localStorage.setItem('darkTheme', this.state.darkTheme);
 this.setState({darkTheme: !this.state.darkTheme}, () => {
   this.props.updateTheme(this.state.darkTheme);
 });
}