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

使用回调函数

最常见的方法是在父组件中定义一个回调函数，并将这个函数作为prop传递给子组件。子组件可以在需要的时候调用这个回调函数，并将数据作为参数传递给父组件。

示例：使用回调函数传递数据

// 父组件
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>;
}

在这个例子中，ParentComponent定义了一个名为handleDataFromChild的回调函数，并通过onDataToParent prop传递给ChildComponent。当子组件中的按钮被点击时，sendDataToParent函数被调用，它通过props.onDataToParent回调将数据发送回父组件。

使用Context API

对于更复杂的应用，可以使用React的Context API来实现跨组件的数据传递，这可以避免通过多层组件传递props。Context提供了一种在组件树中传递数据的方式，而不必显式地通过每一层组件。

示例：使用Context API传递数据

// 创建一个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>;
}

在这个例子中，我们创建了一个Context，并在ParentComponent中提供了一个回调函数。ChildComponent通过useContext Hook获取这个回调函数，并在按钮点击时调用它。