当前位置：首页 > React

react父子组件如何通信

2026-01-24 21:10:15React

父子组件通信方法

父组件向子组件传递数据
通过props实现父组件向子组件传递数据。父组件在调用子组件时通过属性传递值，子组件通过props接收。

父组件示例：

function Parent() {
  const data = "Hello from Parent";
  return <Child message={data} />;
}

子组件示例：

function Child(props) {
  return <div>{props.message}</div>;
}

子组件向父组件传递数据
通过回调函数实现子组件向父组件传递数据。父组件将函数作为props传递给子组件，子组件调用该函数并传递参数。

父组件示例：

function Parent() {
  const handleData = (data) => {
    console.log(data); // 接收子组件数据
  };
  return <Child onSendData={handleData} />;
}

子组件示例：

react父子组件如何通信

function Child({ onSendData }) {
  const sendData = () => {
    onSendData("Data from Child");
  };
  return <button onClick={sendData}>Send</button>;
}

使用Context跨层级通信
当组件层级较深时，可通过React.createContext创建上下文，避免逐层传递props。

创建Context：

const MyContext = React.createContext();

父组件提供值：

react父子组件如何通信

function Parent() {
  return (
    <MyContext.Provider value="Context Data">
      <Child />
    </MyContext.Provider>
  );
}

子组件消费值：

function Child() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

使用Ref直接操作子组件
通过useRef获取子组件实例，直接调用子组件方法或访问其状态（需子组件为类组件或使用forwardRef）。

父组件示例：

function Parent() {
  const childRef = useRef();
  const handleClick = () => {
    childRef.current.childMethod();
  };
  return (
    <>
      <Child ref={childRef} />
      <button onClick={handleClick}>Call Child</button>
    </>
  );
}

子组件示例（使用forwardRef）：

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    childMethod: () => console.log("Child method called")
  }));
  return <div>Child Component</div>;
});