Могут ли реактивные крючки использоваться для впрыскивания компонентов? - PullRequest
Новая
       9

Могут ли реактивные крючки использоваться для впрыскивания компонентов?

1 голос
/ 30 января 2020

Хорошо, подумайте, у меня есть набор компонентов, у всех этих компонентов есть некоторые базовые c поля. Примером может быть всплывающее окно, которое отображается в случае ошибочного состояния.

Это приводит к чему-то вроде: 

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

Хотя это тривиально, настройки могут быть не в случае более сложного взаимодействия с остальной частью компонента нет. Это также ненужный шаблон и нарушает DRY.

Состояния, конечно, могут быть объединены в пользовательский хук useError (или в этом тривиальном случае в одном состоянии). Однако могу ли я также сделать так, чтобы всякий раз, когда я объявлял объект, имеющий useError, он также имел настроенный компонент?

Таким образом, я мог бы предотвратить такие ошибки, как «забыть всплывающее окно» и «забыть установить» useError state "- DRY ошибки.

1 Ответ

1 голос
/ 30 января 2020

Вместо хука рассмотрим следующее определение компонента высшего порядка: 

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 (
    <...>
  );
});
...