React -如何从子组件向父组件发送自定义函数

// 父组件
class ParentComponent extends React.Component {
  handleDataFromChild = (data) => {
    // 处理从子组件传递过来的数据
    console.log(data);
  }

  render() {
    return (
      <ChildComponent sendDataToParent={this.handleDataFromChild} />
    );
  }
}

// 子组件
class ChildComponent extends React.Component {
  sendData = () => {
    const data = 'Hello, Parent!';
    this.props.sendDataToParent(data);
  }

  render() {
    return (
      <button onClick={this.sendData}>发送数据给父组件</button>
    );
  }
}

// 创建Context对象
const MyContext = React.createContext();

// 父组件
class ParentComponent extends React.Component {
  handleDataFromChild = (data) => {
    // 处理从子组件传递过来的数据
    console.log(data);
  }

  render() {
    return (
      <MyContext.Provider value={this.handleDataFromChild}>
        <ChildComponent />
      </MyContext.Provider>
    );
  }
}

// 子组件
class ChildComponent extends React.Component {
  static contextType = MyContext;

  sendData = () => {
    const data = 'Hello, Parent!';
    this.context(data);
  }

  render() {
    return (
      <button onClick={this.sendData}>发送数据给父组件</button>
    );
  }
}