react参数如何传递
React 参数传递方法
父组件向子组件传递参数（Props）
在父组件中通过属性方式传递数据，子组件通过 props 接收。
父组件代码示例：
function ParentComponent() {
const data = "Hello from Parent";
return <ChildComponent message={data} />;
}子组件代码示例：
function ChildComponent(props) {
return <div>{props.message}</div>;
}子组件向父组件传递参数（回调函数）
父组件定义回调函数并通过props传递给子组件，子组件调用该函数并传递参数。
父组件代码示例：
function ParentComponent() {
const handleData = (childData) => {
console.log(childData);
};
return <ChildComponent onData={handleData} />;
}子组件代码示例：
function ChildComponent({ onData }) {
return <button onClick={() => onData("Data from Child")}>Send</button>;
}使用Context跨层级传递参数
创建Context对象并通过Provider传递值，子组件通过Consumer或useContext获取。
创建Context示例：
const MyContext = React.createContext();
function App() {
return (
<MyContext.Provider value="Context Value">
<ChildComponent />
</MyContext.Provider>
);
}消费Context示例：
function ChildComponent() {
const value = React.useContext(MyContext);
return <div>{value}</div>;
}使用Redux进行全局状态管理
安装Redux相关库后创建store和reducer，组件通过connect或useSelector访问状态。
store配置示例：
import { createStore } from 'redux';
const reducer = (state = {}, action) => {
switch(action.type) {
case 'UPDATE_DATA':
return { ...state, data: action.payload };
default:
return state;
}
};
const store = createStore(reducer);组件中使用示例：
import { useSelector, useDispatch } from 'react-redux';
function MyComponent() {
const data = useSelector(state => state.data);
const dispatch = useDispatch();
const updateData = () => {
dispatch({ type: 'UPDATE_DATA', payload: 'New Data' });
};
return (
<div>
<div>{data}</div>
<button onClick={updateData}>Update</button>
</div>
);
}路由参数传递
通过React Router的useParams或location.state获取路由参数。
路由配置示例：
<Route path="/user/:id" component={UserPage} />组件获取参数示例：
import { useParams } from 'react-router-dom';
function UserPage() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}
