当前位置：首页 > React

react中组件间如何传值

2026-01-25 21:50:15React

父子组件传值

父组件通过 props 向子组件传递数据。子组件通过 this.props（类组件）或直接通过参数（函数组件）接收数据。

父组件示例：

import ChildComponent from './ChildComponent';

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

子组件示例（函数组件）：

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

子组件向父组件传值

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

父组件示例：

function ParentComponent() {
  const handleData = (data) => {
    console.log(data); // 接收子组件数据
  };
  return <ChildComponent onSendData={handleData} />;
}

子组件示例：

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

兄弟组件传值

通过状态提升（Lifting State Up）到共同的父组件，或使用全局状态管理工具（如 Redux、Context API）。

react中组件间如何传值

示例（状态提升）：

function ParentComponent() {
  const [sharedData, setSharedData] = useState("");

  return (
    <>
      <SiblingA onDataChange={setSharedData} />
      <SiblingB data={sharedData} />
    </>
  );
}

Context API 跨层级传值

创建 Context 并提供数据，子组件通过 useContext 或 Context.Consumer 获取数据。

创建 Context：

const MyContext = React.createContext();

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

使用 Context（函数组件）：

react中组件间如何传值

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

Redux 全局状态管理

适用于复杂应用，通过 store 管理状态，组件通过 useSelector 和 useDispatch 读写数据。

配置 Store：

import { createStore } from 'redux';
import { Provider } from 'react-redux';

const store = createStore(rootReducer);

function App() {
  return (
    <Provider store={store}>
      <ComponentA />
    </Provider>
  );
}

组件中使用：

import { useSelector, useDispatch } from 'react-redux';

function ComponentA() {
  const data = useSelector(state => state.data);
  const dispatch = useDispatch();

  const updateData = () => {
    dispatch({ type: 'UPDATE_DATA', payload: "New Data" });
  };

  return <button onClick={updateData}>Update</button>;
}

使用事件总线（Event Emitter）

通过第三方库（如 events）实现发布-订阅模式，适用于非父子组件通信。

示例：

import { EventEmitter } from 'events';
const eventBus = new EventEmitter();

// 发布事件
eventBus.emit("dataEvent", "Some Data");

// 订阅事件
eventBus.on("dataEvent", (data) => {
  console.log(data);
});