当前位置：首页 > React

react子如何传父

2026-03-10 19:17:03React

React 子组件向父组件传递数据的常用方法

回调函数（Props 传递函数）
父组件通过 props 向子组件传递一个回调函数，子组件调用该函数并传递数据。这是 React 中最基础的方法。
父组件示例：

function Parent() {
  const handleData = (data) => {
    console.log("子组件传递的数据:", data);
  };
  return <Child onData={handleData} />;
}

子组件示例：

function Child({ onData }) {
  const sendData = () => {
    onData("Hello Parent!");
  };
  return <button onClick={sendData}>传递数据</button>;
}

使用 Context API
适用于跨多层组件传递数据，避免逐层传递 props 的繁琐。
创建 Context：

const DataContext = React.createContext();
function Parent() {
  const [data, setData] = useState(null);
  return (
    <DataContext.Provider value={{ data, setData }}>
      <Child />
    </DataContext.Provider>
  );
}

子组件通过 useContext 修改数据：

function Child() {
  const { setData } = useContext(DataContext);
  return <button onClick={() => setData("Updated")}>更新数据</button>;
}

自定义事件（非 React 原生）
通过浏览器原生事件机制实现通信，适用于非父子关系的组件。
子组件触发事件：

react子如何传父

function Child() {
  const emitEvent = () => {
    const event = new CustomEvent("childEvent", { detail: "Data from child" });
    window.dispatchEvent(event);
  };
  return <button onClick={emitEvent}>触发事件</button>;
}

父组件监听事件：

function Parent() {
  useEffect(() => {
    window.addEventListener("childEvent", (e) => console.log(e.detail));
    return () => window.removeEventListener("childEvent");
  }, []);
  return <Child />;
}

状态管理库（Redux/Zustand）
通过全局状态管理实现任意组件间通信，适合复杂应用。
以 Zustand 为例：
创建 store：

const useStore = create((set) => ({
  data: null,
  setData: (newData) => set({ data: newData }),
}));

子组件修改状态：

react子如何传父

function Child() {
  const setData = useStore((state) => state.setData);
  return <button onClick={() => setData("Global data")}>保存到Store</button>;
}

父组件读取状态：

function Parent() {
  const data = useStore((state) => state.data);
  return <div>{data}</div>;
}

使用 ref 和命令式方法
父组件通过 ref 调用子组件暴露的方法获取数据。
子组件暴露方法：

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    getData: () => "Data from method",
  }));
  return <div>Child Component</div>;
});

父组件调用方法：

function Parent() {
  const childRef = useRef();
  const handleClick = () => {
    console.log(childRef.current.getData());
  };
  return (
    <>
      <Child ref={childRef} />
      <button onClick={handleClick}>获取数据</button>
    </>
  );
}