react中用hooks组件如何传参
使用 Props 传递参数
在 React 中，无论是类组件还是函数组件，都可以通过 props 传递参数。Hooks 组件（函数组件）通过函数参数接收 props。
// 父组件
const ParentComponent = () => {
const message = "Hello from parent";
return <ChildComponent message={message} />;
};
// 子组件
const ChildComponent = ({ message }) => {
return <div>{message}</div>;
};使用 Context API 跨层级传参
对于需要跨多层组件传递的参数，可以使用 React 的 Context API 结合 useContext Hook。
// 创建 Context
const MessageContext = React.createContext();
// 父组件
const ParentComponent = () => {
const message = "Hello from context";
return (
<MessageContext.Provider value={message}>
<ChildComponent />
</MessageContext.Provider>
);
};
// 子组件
const ChildComponent = () => {
const message = useContext(MessageContext);
return <div>{message}</div>;
};使用自定义 Hook 封装逻辑
对于需要复用的逻辑和参数，可以封装成自定义 Hook，然后在多个组件中调用。
// 自定义 Hook
const useMessage = (initialMessage) => {
const [message, setMessage] = useState(initialMessage);
const updateMessage = (newMessage) => setMessage(newMessage);
return { message, updateMessage };
};
// 组件中使用
const ChildComponent = () => {
const { message } = useMessage("Default message");
return <div>{message}</div>;
};通过回调函数传递参数
父组件可以通过回调函数接收子组件传递的参数。
// 父组件
const ParentComponent = () => {
const handleMessage = (msg) => console.log(msg);
return <ChildComponent onMessage={handleMessage} />;
};
// 子组件
const ChildComponent = ({ onMessage }) => {
const message = "Hello from child";
return <button onClick={() => onMessage(message)}>Send Message</button>;
};使用 useReducer 管理复杂状态
对于需要多个参数的复杂状态，可以使用 useReducer Hook。
// 定义 reducer
const messageReducer = (state, action) => {
switch (action.type) {
case "UPDATE":
return { ...state, message: action.payload };
default:
return state;
}
};
// 父组件
const ParentComponent = () => {
const [state, dispatch] = useReducer(messageReducer, { message: "Initial" });
return <ChildComponent dispatch={dispatch} />;
};
// 子组件
const ChildComponent = ({ dispatch }) => {
const updateMessage = () => dispatch({ type: "UPDATE", payload: "Updated" });
return <button onClick={updateMessage}>Update Message</button>;
};使用 Refs 传递可变值
通过 useRef 可以传递可变值，且不会触发重新渲染。
// 父组件
const ParentComponent = () => {
const messageRef = useRef("Hello from ref");
return <ChildComponent messageRef={messageRef} />;
};
// 子组件
const ChildComponent = ({ messageRef }) => {
return <div>{messageRef.current}</div>;
};通过路由参数传递
在使用 React Router 时，可以通过路由参数传递数据。
// 路由配置
<Route path="/message/:message" component={ChildComponent} />
// 父组件导航
const ParentComponent = () => {
const history = useHistory();
const navigate = () => history.push("/message/Hello%20from%20route");
return <button onClick={navigate}>Navigate</button>;
};
// 子组件获取参数
const ChildComponent = () => {
const { message } = useParams();
return <div>{decodeURIComponent(message)}</div>;
};以上方法涵盖了 React Hooks 组件中常见的参数传递场景，可以根据具体需求选择合适的方式。
