react是如何传递参数的
React 参数传递方式
在 React 中，参数传递主要通过以下几种方式实现，适用于不同场景：
父子组件通信（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("Received:", data);
};
return <Child onSendData={handleData} />;
}
// 子组件
function Child({ onSendData }) {
return <button onClick={() => onSendData("Child Data")}>Send</button>;
}Context API
跨层级组件共享数据：
const MyContext = React.createContext();
// 提供者组件
function Provider() {
return (
<MyContext.Provider value={{ sharedData: "Global Data" }}>
<Consumer />
</MyContext.Provider>
);
}
// 消费者组件
function Consumer() {
const context = React.useContext(MyContext);
return <div>{context.sharedData}</div>;
}状态管理工具（Redux/Zustand）
全局状态管理库实现任意组件间通信：
// Redux示例
import { useSelector, useDispatch } from 'react-redux';
function Component() {
const data = useSelector(state => state.data);
const dispatch = useDispatch();
const updateData = () => {
dispatch({ type: 'UPDATE', payload: "New Data" });
};
}路由参数（React Router）
通过URL传递参数：
// 路由配置
<Route path="/user/:id" component={User} />
// 组件获取参数
function User({ match }) {
return <div>User ID: {match.params.id}</div>;
}Refs 传递
直接访问DOM或组件实例：
function Parent() {
const childRef = React.useRef();
const handleClick = () => {
childRef.current.doSomething();
};
return (
<>
<Child ref={childRef} />
<button onClick={handleClick}>Trigger Child</button>
</>
);
}
// 需使用forwardRef包装子组件
const Child = React.forwardRef((props, ref) => {
React.useImperativeHandle(ref, () => ({
doSomething: () => console.log("Child method called")
}));
return <div>Child Component</div>;
});自定义Hook共享逻辑
封装可复用的状态逻辑：
function useCustomHook(initialValue) {
const [value, setValue] = React.useState(initialValue);
const double = () => setValue(v => v * 2);
return { value, double };
}
function Component() {
const { value, double } = useCustomHook(1);
return <button onClick={double}>{value}</button>;
}
