当前位置：首页 > React

react父子组件之间如何通信

2026-03-11 12:50:23React

父子组件通信方法

父组件向子组件传递数据
父组件通过props向子组件传递数据。子组件通过props接收父组件传递的值。

react父子组件之间如何通信

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

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

子组件向父组件传递数据
父组件通过传递回调函数给子组件，子组件调用该函数并传递数据。

react父子组件之间如何通信

// 父组件
function Parent() {
  const handleData = (data) => {
    console.log(data); // 输出子组件传递的数据
  };
  return <Child onSendData={handleData} />;
}

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

使用Context跨层级通信
适用于深层嵌套组件，避免逐层传递props。

import React, { createContext, useContext } from "react";

const MyContext = createContext();

// 父组件
function Parent() {
  const value = "Shared Data";
  return (
    <MyContext.Provider value={value}>
      <Child />
    </MyContext.Provider>
  );
}

// 子组件
function Child() {
  const contextValue = useContext(MyContext);
  return <div>{contextValue}</div>;
}

使用Ref直接操作子组件
父组件通过ref访问子组件的实例或DOM节点。

import React, { useRef } from "react";

// 子组件（需使用forwardRef）
const Child = React.forwardRef((props, ref) => {
  return <div ref={ref}>Child Component</div>;
});

// 父组件
function Parent() {
  const childRef = useRef();
  const handleClick = () => {
    console.log(childRef.current); // 访问子组件的DOM节点
  };
  return (
    <>
      <Child ref={childRef} />
      <button onClick={handleClick}>Access Child</button>
    </>
  );
}