当前位置：首页 > React

react如何父传子子传父

2026-01-26 00:57:50React

父组件向子组件传递数据

在React中，父组件通过props向子组件传递数据。父组件在渲染子组件时，将数据作为属性传递给子组件。

父组件示例

import React from 'react';
import ChildComponent from './ChildComponent';

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

子组件示例

import React from 'react';

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

子组件向父组件传递数据

子组件通过调用父组件传递的回调函数实现数据传递。父组件定义一个函数，通过props传递给子组件，子组件调用该函数并传入数据。

父组件示例

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [childData, setChildData] = useState("");

  const handleDataFromChild = (data) => {
    setChildData(data);
  };

  return (
    <div>
      <p>Data from child: {childData}</p>
      <ChildComponent onSendData={handleDataFromChild} />
    </div>
  );
}

子组件示例

import React from 'react';

function ChildComponent(props) {
  const sendDataToParent = () => {
    props.onSendData("Hello from Child");
  };

  return <button onClick={sendDataToParent}>Send Data to Parent</button>;
}

使用Context跨层级传递数据

对于深层嵌套的组件，可以使用React的Context API避免逐层传递props。

创建Context

import React, { createContext, useState } from 'react';

export const DataContext = createContext();

function ParentComponent() {
  const [data, setData] = useState("Initial Data");

  return (
    <DataContext.Provider value={{ data, setData }}>
      <ChildComponent />
    </DataContext.Provider>
  );
}

子组件使用Context

react如何父传子子传父

import React, { useContext } from 'react';
import { DataContext } from './ParentComponent';

function ChildComponent() {
  const { data, setData } = useContext(DataContext);

  return (
    <div>
      <p>Data from context: {data}</p>
      <button onClick={() => setData("Updated Data")}>Update Data</button>
    </div>
  );
}