只能在组件或其他挂钩中使用挂钩,但可以在其他函数中使用挂钩的返回值。提取
useContext
并使用返回的
dispatch
:
const Component = () => {
const { dispatch } = React.useContext(SomeContext);
function someAction() {
dispatch({
type: "ACTION_NAME",
});
}
return (
<button onClick={someAction}>Click me</button>
);
};
我将创建一个自定义钩子,返回动作函数,并在组件中使用它,以使其不那么笨重,更易于重用:
const useAction = () => {
const { dispatch } = React.useContext(SomeContext);
return () => dispatch({
type: "ACTION_NAME",
});
};
用法:
const Component = () => {
const someAction = useAction();
return (
<button onClick={someAction}>Click me</button>
);
};