react如何传值
父组件向子组件传值
在React中，父组件可以通过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 = (data) => {
console.log(data);
};
return <ChildComponent onData={handleData} />;
}子组件代码示例：
function ChildComponent(props) {
const sendData = () => {
props.onData("Data from Child");
};
return <button onClick={sendData}>Send Data</button>;
}使用Context跨组件传值
对于需要在多个组件间共享的数据，可以使用React的Context API。创建一个Context对象，然后用Provider组件包裹需要共享数据的组件树。
创建Context：
const MyContext = React.createContext();提供Context值：
function App() {
const value = "Shared Value";
return (
<MyContext.Provider value={value}>
<ChildComponent />
</MyContext.Provider>
);
}消费Context值：
function ChildComponent() {
const value = React.useContext(MyContext);
return <div>{value}</div>;
}使用状态管理库传值
对于复杂应用，可以使用状态管理库如Redux或MobX来管理全局状态。这些库提供了集中式的状态存储，任何组件都可以订阅和更新状态。
Redux示例：
// 定义action
const setData = (data) => ({
type: 'SET_DATA',
payload: data
});
// 在组件中dispatch action
dispatch(setData("Some data"));
// 在组件中获取数据
const data = useSelector(state => state.data);使用路由参数传值
在单页应用中，可以通过路由参数在不同页面间传递数据。React Router提供了useParams和useLocation等钩子来获取路由参数。
传递路由参数：
<Link to="/user/123">User 123</Link>获取路由参数：
function UserPage() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}
