react如何传参数
传递参数的方式
在React中传递参数有多种方式，具体取决于组件之间的关系和需求。以下是几种常见的传参方法：
父子组件传参（Props）
父组件通过props向子组件传递数据。子组件通过props对象接收参数。
// 父组件
function Parent() {
const data = "Hello from Parent";
return <Child message={data} />;
}
// 子组件
function Child(props) {
return <div>{props.message}</div>;
}子组件向父组件传参
通过父组件传递回调函数给子组件，子组件调用回调函数并传递参数。
// 父组件
function Parent() {
const handleData = (data) => {
console.log(data);
};
return <Child onSendData={handleData} />;
}
// 子组件
function Child({ onSendData }) {
return <button onClick={() => onSendData("Data from Child")}>Send</button>;
}Context API跨层级传参
适用于深层嵌套组件或全局状态共享。
// 创建Context
const MyContext = React.createContext();
// 父组件提供数据
function Parent() {
return (
<MyContext.Provider value="Context Data">
<Child />
</MyContext.Provider>
);
}
// 子组件消费数据
function Child() {
const data = useContext(MyContext);
return <div>{data}</div>;
}路由传参（React Router）
通过URL传递参数，适合页面间导航。
// 定义路由参数
<Route path="/user/:id" component={User} />
// 组件中获取参数
function User({ match }) {
const { id } = match.params;
return <div>User ID: {id}</div>;
}状态管理库（Redux/MobX）
通过全局状态管理工具传递复杂或跨组件数据。
// Redux示例：通过dispatch传递参数
dispatch({ type: 'ADD_ITEM', payload: itemData });选择传参方式的建议
- 简单父子通信：直接使用props。
- 深层嵌套：优先考虑Context API或状态管理库。
- 页面跳转：使用React Router的动态路由。
- 全局状态：Redux或MobX更适合大型应用。
