当前位置：首页 > React

react组件之间如何传值

2026-01-25 00:55:44React

父子组件传值（Props）

父组件通过props向子组件传递数据。父组件中定义属性，子组件通过this.props（类组件）或直接解构（函数组件）接收。

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

// 子组件（函数式）
function Child({ message }) {
  return <div>{message}</div>;
}

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

父组件将函数作为prop传递给子组件，子组件调用该函数并传递参数实现反向通信。

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

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

Context API跨层级传值

通过React.createContext创建上下文，Provider提供数据，Consumer或useContext消费数据。

const MyContext = React.createContext();

function App() {
  return (
    <MyContext.Provider value="Global Data">
      <ComponentA />
    </MyContext.Provider>
  );
}

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

状态管理工具（Redux/Zustand）

使用第三方库集中管理状态，各组件通过dispatch更新状态或selector获取状态。

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

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

事件总线（Event Emitter）

通过自定义事件实现任意组件间通信，适用于非父子关系的深层组件。

import EventEmitter from 'events';
const emitter = new EventEmitter();

// 发布者组件
emitter.emit("eventName", data);

// 订阅者组件
useEffect(() => {
  emitter.on("eventName", (data) => {
    console.log(data);
  });
  return () => emitter.off("eventName");
}, []);

Refs引用传递

通过forwardRef将ref传递给子组件，直接访问DOM节点或组件实例。

const Child = forwardRef((props, ref) => {
  return <div ref={ref}>Child</div>;
});

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

react组件之间如何传值