Question

请考虑一下我有一组组件，这些组件都有一些基本字段。例如，可能会弹出一个错误状态的弹出窗口。

这导致类似：

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

虽然这很简单，但如果与其他组件之间没有更复杂的交互，则设置可能不会。这也是不必要的样板，并且违反了DRY。

当然可以将状态组合在自定义钩子useError中（或在这种情况下，在单个状态中）。但是，我还能做到这一点吗，以便每当我声明一个对象具有useError时，它也会设置组件？

这样，我可以防止出现“忘记弹出窗口”和“忘记设置useError状态”之类的错误-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钩子来注入组件吗？

1 个答案: