React:如何在更改子组件后正确更新父组件的状态

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: ''
    };
    this.updateData = this.updateData.bind(this);
  }

  updateData(newData) {
    this.setState({ data: newData });
  }

  render() {
    return (
      <div>
        <ChildComponent onUpdateData={this.updateData} />
        <p>父组件状态：{this.state.data}</p>
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // 子组件更新数据
    const newData = '新的数据';
    this.props.onUpdateData(newData);
  }

  render() {
    return (
      <button onClick={this.handleClick}>更新父组件状态</button>
    );
  }
}

const MyContext = React.createContext();

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: ''
    };
    this.updateData = this.updateData.bind(this);
  }

  updateData(newData) {
    this.setState({ data: newData });
  }

  render() {
    return (
      <MyContext.Provider value={{ data: this.state.data, updateData: this.updateData }}>
        <ChildComponent />
        <p>父组件状态：{this.state.data}</p>
      </MyContext.Provider>
    );
  }
}

class ChildComponent extends React.Component {
  static contextType = MyContext;

  handleClick() {
    // 子组件更新数据
    const newData = '新的数据';
    this.context.updateData(newData);
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>更新父组件状态</button>
        <p>子组件状态：{this.context.data}</p>
      </div>
    );
  }
}