Reactjs 监听应用程序组件中的状态变化

Question

我对 React 比较陌生。我想监听我拥有的菜单组件的状态变化。我需要让状态更改在应用程序的最高级别冒泡，即 app.jsx 本身。我在应用程序中尝试了各种方法来监听事件，但到目前为止都没有奏效。我没有在应用程序中使用 redux，因为它只是一个我正在打开和关闭的菜单。我如何在整个应用程序中监听此更改？

感谢您的帮助。

!-- 我的组件函数

export default class Comp extends React.Component {

constructor(props){
    super(props);
    this.toggleDropdown = this.toggleDropdown.bind(this);
    this.state = {
        isOpen: false
    }

}

toggleDropdown = () => {
    const toggledIsOpen = this.state.isOpen ? false : true;

    this.setState({
        isOpen: toggledIsOpen
    });

}

render = () =>

    
  <button onClick={this.toggleDropdown}>Menu</button>
    
}

!--- 应用

export default class App extends React.Component {

constructor(props) {
    super(props);
}

componentDidUpdate(prevProps, prevState) {
    console.log('//');
    console.log(this.state);
}

render = () =>

   <span> value of state to update here</span>
   <Comp/>

 }

Answer 1

你可以通过回调来做到这一点:

export default class App extends React.Component {

constructor(props) {
    super(props);
}

componentDidUpdate(prevProps, prevState) {
    console.log('//');
    console.log(this.state);
}
callBack(value) {
   console.log(value) // "testValue"
}
render = () => //note: you should have single component in return -> wrap this within div, for example

   <span> value of state to update here</span>
   <Comp cb={this.callBack}/>

 }


export default class Comp extends React.Component {

constructor(props){
    super(props);
    this.toggleDropdown = this.toggleDropdown.bind(this);
    this.state = {
        isOpen: false
    }

}

toggleDropdown = () => {
    const toggledIsOpen = this.state.isOpen ? false : true;

    this.setState({
        isOpen: toggledIsOpen
    });
    this.props.cb("testValue");

}

render = () =>


  <button onClick={this.toggleDropdown}>Menu</button>

}