Question

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

我改变了这个

所以我有另一个组件，它的名字是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>
);

那么最佳做法是什么？

Answer 1

这样做的方法是让Main.js通过道具将函数传递给Settings.js。

Main.js：

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

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

Settings.js：

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

Answer 2

这取决于两个组件之间的关系：如果它们像父子一样，一个包含anthor，最好的做法是通过通过道具传递的回调连接。如果它们根本不相关，那么使用Redux似乎就是典型的情况。

当状态从其他组件更改时，我如何获得

2 个答案: