当前位置：首页 > React

react父子组件如何传值

2026-01-25 04:33:36React

React 父子组件传值方法

父组件向子组件传值（Props）

父组件通过属性（props）将数据传递给子组件。子组件通过 props 接收数据。

父组件代码示例：

import ChildComponent from './ChildComponent';

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

子组件代码示例：

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

子组件向父组件传值（回调函数）

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

父组件代码示例：

import ChildComponent from './ChildComponent';

function ParentComponent() {
  const handleData = (data) => {
    console.log("Data from child:", data);
  };
  return <ChildComponent onData={handleData} />;
}

子组件代码示例：

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

使用 Context API 跨层级传值

适用于深层嵌套组件传值，避免逐层传递 props。

创建 Context：

import { createContext, useContext } from 'react';

const MyContext = createContext();

function ParentComponent() {
  return (
    <MyContext.Provider value={"Shared Data"}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

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

使用 Refs 访问子组件

父组件通过 ref 直接调用子组件方法或访问其状态。

父组件代码示例：

import { useRef } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const childRef = useRef();

  const getChildData = () => {
    alert(childRef.current.getValue());
  };

  return (
    <>
      <ChildComponent ref={childRef} />
      <button onClick={getChildData}>Get Child Data</button>
    </>
  );
}

子组件代码示例（需使用 forwardRef）：

import { forwardRef, useImperativeHandle } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    getValue: () => "Data from Child"
  }));

  return <div>Child Component</div>;
});

每种方法适用于不同场景，根据组件关系和需求选择合适的方式。简单父子通信推荐使用 props 和回调函数，深层嵌套组件可考虑 Context API，需要直接访问子组件时使用 refs。

react父子组件如何传值