在React中实现子组件向父组件传值的几种方法

// 父组件
function ParentComponent() {
  const handleDataFromChild = (data) => {
    console.log('Data from child:', data);
  };

  return <ChildComponent onDataToParent={handleDataFromChild} />;
}

// 子组件
function ChildComponent(props) {
  const sendDataToParent = () => {
    props.onDataToParent('Hello from Child!');
  };

  return <button onClick={sendDataToParent}>Send Data to Parent</button>;
}

// 创建一个Context
const MyContext = React.createContext();

// 父组件
function ParentComponent() {
  const handleDataFromChild = (data) => {
    console.log('Data from child:', data);
  };

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

// 子组件
function ChildComponent() {
  const { onDataToParent } = React.useContext(MyContext);

  const sendDataToParent = () => {
    onDataToParent('Hello from Child!');
  };

  return <button onClick={sendDataToParent}>Send Data to Parent</button>;
}