当前位置：首页 > React

react如何传参

2026-03-30 23:05:59React

React 传参方法

在 React 中，组件之间传递参数可以通过多种方式实现，以下是常见的传参方法：

父组件向子组件传参（Props）
父组件通过属性（props）将数据传递给子组件。子组件通过 props 对象接收参数。

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

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

子组件向父组件传参（回调函数）
父组件通过传递回调函数给子组件，子组件调用该函数并传递参数。

// 父组件
function ParentComponent() {
  const handleChildData = (data) => {
    console.log(data);
  };
  return <ChildComponent onData={handleChildData} />;
}

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

Context API 跨层级传参
通过 React.createContext 创建上下文，实现跨层级组件传参。

const MyContext = React.createContext();

// 父组件（Provider）
function ParentComponent() {
  return (
    <MyContext.Provider value="Shared Data">
      <ChildComponent />
    </MyContext.Provider>
  );
}

// 子组件（Consumer）
function ChildComponent() {
  return (
    <MyContext.Consumer>
      {(value) => <div>{value}</div>}
    </MyContext.Consumer>
  );
}

使用 Hook（useContext）简化 Context 传参
在函数组件中，可以通过 useContext Hook 直接获取上下文值。

const MyContext = React.createContext();

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

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

路由传参（React Router）
通过路由参数或查询字符串传递参数。

// 路由配置
<Route path="/user/:id" component={UserComponent} />

// 组件中获取参数
function UserComponent({ match }) {
  const { id } = match.params;
  return <div>User ID: {id}</div>;
}

状态管理库（Redux、MobX）传参
通过全局状态管理库实现跨组件传参。

react如何传参

// Redux 示例
// Action
const setData = (data) => ({ type: "SET_DATA", payload: data });

// Reducer
const reducer = (state = {}, action) => {
  switch (action.type) {
    case "SET_DATA":
      return { ...state, data: action.payload };
    default:
      return state;
  }
};

// 组件中使用
function Component() {
  const dispatch = useDispatch();
  const data = useSelector((state) => state.data);

  const updateData = () => {
    dispatch(setData("New Data"));
  };

  return (
    <div>
      <div>{data}</div>
      <button onClick={updateData}>Update Data</button>
    </div>
  );
}