react如何传参
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）传参
通过全局状态管理库实现跨组件传参。
// 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>
);
}注意事项
- Props 是单向数据流，子组件不能直接修改父组件传递的 props。
- Context 适用于跨层级传参，但过度使用可能导致组件耦合。
- 路由传参适合页面间的参数传递。
- 状态管理库适合复杂应用中的全局状态共享。
