react hooks可以用来注入组件吗？

Question

好吧，假设我有一组组件，这些组件都有一些基本字段。一个示例可能是在出现错误状态时显示的弹出窗口。

这会导致类似这样的结果：

function MyComponent(props) {
    const [showErr, setShowErr] = React.useState(false);
    const [errMsg, setErrMsg] = React.useState('');
    return <>
        <...>
        <SomePopup
            open={showErr}
            errMsg={errMsg}
        />
    </>
}

虽然这很微不足道，但如果与组件的其余部分进行更复杂的交互，则设置可能不是。这也是不必要的样板文件并且违反了 DRY。

这些状态当然可以组合在一个自定义钩子中 useError（或者在这种简单的情况下组合在一个状态中）。但是，我是否也可以这样做，以便每当我声明一个对象具有 useError 时，它也可以设置组件？

这样我就可以防止像 "forgetting the popup" 和 "forgetting to set useError state" 这样的错误 - DRY 错误。

Answer 1

代替钩子，考虑以下高阶组件定义：

function withSomePopup(MyComponent) {
  return function MyComponentWithSomePopup(props) {
    const [showErr, setShowErr] = React.useState(false);
    const [errMsg, setErrMsg] = React.useState('');
    const propsWithSomePopup = React.useMemo(() => ({
      ...props,
      setShowErr,
      setErrMsg
    }), [props, setShowErr, setErrMsg]);

    return (
      <>
        <MyComponent {...propsWithSomePopup} />
        <SomePopup open={showErr} errMsg={errMsg} />
      </>
    );
  };
}

然后你可以像这样包装你的组件：

export default withSomePopup(function MyComponent(props) {
  const { setShowErr, setErrMsg } = props;

  return (
    <...>
  );
});

react hooks可以用来注入组件吗？

Can react hooks be used to inject components?

javascript

dry

reactjs

react-hooks