当前位置：首页 > React

react是如何传递数据的

2026-01-25 15:00:36React

React 数据传递方式

React 主要通过以下几种方式传递数据，适用于不同场景：

1. 父组件向子组件传递（Props）
父组件通过属性（props）将数据传递给子组件，子组件通过 props 接收。这是 React 中最基础的数据流方式。

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

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

2. 子组件向父组件传递（回调函数）
父组件通过 props 传递回调函数给子组件，子组件调用该函数将数据传回父组件。

// 父组件
function Parent() {
  const handleData = (data) => console.log(data);
  return <Child onSend={handleData} />;
}

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

3. 跨层级组件传递（Context API）
通过 React.createContext 创建上下文，避免逐层传递 props。

const DataContext = React.createContext();

// 提供者组件
function Parent() {
  return (
    <DataContext.Provider value="Global Data">
      <Child />
    </DataContext.Provider>
  );
}

// 消费者组件
function Child() {
  const data = useContext(DataContext);
  return <div>{data}</div>;
}

4. 状态管理工具（Redux/Zustand等）
全局状态管理库适用于复杂应用，集中管理数据并通过订阅机制分发。

// Redux 示例
import { useSelector } from 'react-redux';

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

5. 组件间共享（状态提升）
将多个组件依赖的状态提升到共同的父组件中管理，通过 props 分发。

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <>
      <ComponentA count={count} />
      <ComponentB setCount={setCount} />
    </>
  );
}

6. 直接传递（Ref/Portals等特殊情况）
通过 ref 直接访问子组件实例或 DOM 节点，但需谨慎使用。

function Parent() {
  const childRef = useRef();
  useEffect(() => {
    childRef.current.doSomething();
  }, []);
  return <Child ref={childRef} />;
}