当前位置：首页 > React

react如何向子组件传输数据

2026-01-25 18:29:02React

传递数据的方式

在React中，父组件向子组件传递数据主要通过props实现。props是React组件之间通信的基本机制，可以传递任意类型的数据，包括字符串、数字、对象、数组甚至函数。

父组件通过在子组件标签上添加属性的方式传递数据：

<ChildComponent data={someData} />

子组件通过props接收数据：

react如何向子组件传输数据

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

使用解构语法

ES6的解构赋值语法可以让代码更简洁：

function ChildComponent({ data }) {
  return <div>{data}</div>;
}

传递函数

父组件可以通过props将函数传递给子组件，实现子组件向父组件的反向通信：

react如何向子组件传输数据

function ParentComponent() {
  const handleChildEvent = (dataFromChild) => {
    console.log(dataFromChild);
  };

  return <ChildComponent onEvent={handleChildEvent} />;
}

function ChildComponent({ onEvent }) {
  return <button onClick={() => onEvent('Hello from child')}>Click</button>;
}

使用Context API

对于需要跨多层级组件传递数据的场景，可以使用React的Context API：

const DataContext = React.createContext();

function ParentComponent() {
  return (
    <DataContext.Provider value={{ data: 'some data' }}>
      <ChildComponent />
    </DataContext.Provider>
  );
}

function ChildComponent() {
  const contextData = React.useContext(DataContext);
  return <div>{contextData.data}</div>;
}

使用children prop

React的特殊propchildren允许将内容直接嵌套在子组件标签中传递：

function ParentComponent() {
  return (
    <ChildComponent>
      <div>This content will be passed as children</div>
    </ChildComponent>
  );
}

function ChildComponent({ children }) {
  return <div>{children}</div>;
}