react如何传参
在React中传递参数的方法
父子组件间通过props传参
父组件通过props向子组件传递数据。子组件通过this.props（类组件）或直接解构props（函数组件）接收参数。
// 父组件
function Parent() {
const data = "Hello from Parent";
return <Child message={data} />;
}
// 子组件（函数组件）
function Child({ message }) {
return <div>{message}</div>;
}
// 子组件（类组件）
class Child extends React.Component {
render() {
return <div>{this.props.message}</div>;
}
}子组件向父组件传参
通过将回调函数作为props传递给子组件，子组件调用该函数并传递参数。
// 父组件
function Parent() {
const handleChildData = (data) => {
console.log(data);
};
return <Child sendData={handleChildData} />;
}
// 子组件
function Child({ sendData }) {
const data = "Data from Child";
return <button onClick={() => sendData(data)}>Send</button>;
}使用Context跨层级传参
适用于深层嵌套组件间的参数传递。
const MyContext = React.createContext();
// 提供者组件
function App() {
return (
<MyContext.Provider value="Shared Data">
<Child />
</MyContext.Provider>
);
}
// 消费者组件
function Child() {
return (
<MyContext.Consumer>
{value => <div>{value}</div>}
</MyContext.Consumer>
);
}通过路由传参
使用react-router-dom进行页面间参数传递。
// 传递参数
<Link to="/user/123">User</Link>
// 或
<Link to={{ pathname: "/user", state: { id: 123 } }}>User</Link>
// 接收参数
function User() {
// URL参数
const { id } = useParams();
// state参数
const { state } = useLocation();
return <div>User ID: {id || state?.id}</div>;
}使用状态管理库传参
通过Redux或MobX等状态管理工具共享参数。
// Redux示例
// 定义action
const setData = (data) => ({ type: 'SET_DATA', payload: data });
// 组件中dispatch
dispatch(setData("Some data"));
// 组件中获取
const data = useSelector(state => state.data);通过ref传参
使用ref直接访问组件实例或DOM元素。
function Parent() {
const childRef = useRef();
const handleClick = () => {
childRef.current.doSomething("Data via ref");
};
return (
<>
<Child ref={childRef} />
<button onClick={handleClick}>Call Child</button>
</>
);
}
// 子组件需要使用forwardRef
const Child = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
doSomething: (data) => {
console.log(data);
}
}));
return <div>Child</div>;
});
