当前位置：首页 > React

react如何传值

2026-01-24 00:40:02React

React 传值方法

在 React 中，组件间的数据传递可以通过多种方式实现，主要包括父子组件传值、兄弟组件传值以及跨层级组件传值。

父子组件传值

父组件通过 props 向子组件传递数据，子组件通过接收 props 来获取数据。

父组件传递数据：

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

子组件接收数据：

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

子组件向父组件传值

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

父组件定义回调函数：

function ParentComponent() {
  const handleData = (data) => {
    console.log("Data from child:", data);
  };
  return <ChildComponent onData={handleData} />;
}

子组件调用回调函数：

react如何传值

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

兄弟组件传值

兄弟组件之间可以通过共同的父组件进行数据传递，或者使用状态管理工具如 Redux 或 Context API。

通过父组件传递：

function ParentComponent() {
  const [data, setData] = useState("");
  return (
    <>
      <ChildA onData={setData} />
      <ChildB data={data} />
    </>
  );
}

Context API 跨层级传值

使用 React.createContext 创建上下文，通过 Provider 提供数据，子组件通过 useContext 或 Consumer 获取数据。

创建上下文：

react如何传值

const MyContext = React.createContext();

function App() {
  return (
    <MyContext.Provider value="Hello from Context">
      <ChildComponent />
    </MyContext.Provider>
  );
}

子组件使用数据：

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

使用状态管理工具（Redux）

Redux 提供全局状态管理，适用于复杂应用中的数据共享。

定义 Redux store：

import { createStore } from 'redux';

const initialState = { message: "" };
function reducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_MESSAGE':
      return { ...state, message: action.payload };
    default:
      return state;
  }
}

const store = createStore(reducer);

组件中使用：

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

function ComponentA() {
  const dispatch = useDispatch();
  const setMessage = () => {
    dispatch({ type: 'SET_MESSAGE', payload: "Hello from Redux" });
  };
  return <button onClick={setMessage}>Set Message</button>;
}

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