Блог

Главная - Вопросы по программированию - Передача функции привязки компоненту, который будет использоваться в переданном компоненте

Передача функции привязки компоненту, который будет использоваться в переданном компоненте

#javascript #reactjs #react-hooks

Вопрос:

Можем ли мы передать hook как функцию компоненту и использовать его в этом компоненте? Как и в примере ниже, я передаю useProps withPropConnector , который возвращает Connect компонент. Это useProps используется в Connect компоненте. Я нарушаю какие-либо правила крючка?

 // Landing.jsx  export const Landing = (props) =gt; {  const { isTypeOne, hasFetchedData } = props;   if (!hasFetchedData) {  return lt;Loader /gt;;  }   const renderView = () =gt; {  if (isSomeTypeOne) {  return lt;TypeOneView /gt;;  }   return lt;TypeTwoView /gt;;  };   return (  lt;gt;  lt;Wrappergt;  {renderView()}  lt;SomeNavigation /gt;  lt;/Wrappergt;  lt;SomeModals /gt;  lt;/gt;  ); };  const useProps = () =gt; {  const { query } = useRouter();  const { UID } = query;   const { isTypeOne, isTypeTwo } = useSelectorWithShallowEqual(getType);  const hasFetchedData = useSelectorWithShallowEqual(  getHasFetchedData(UID)  );   const props = {  isTypeOne,  isTypeTwo,  hasFetchedData  };   return props; };  export default withPropConnector(useProps, Landing);    // withPropConnector.js  const withPropConnector = (useProps, Component) =gt; {  const Connect = (propsFromParent = emptyObject) =gt; {  const props = useProps(propsFromParent);  return lt;Component {...propsFromParent} {...props} /gt;;  };   return Connect; };  export default withPropConnector;

Комментарии:

1. Я уверен, что это работает просто отлично. Единственная проблема заключается в том, что это эквивалентно использованию запросов пользователей в компоненте посадки. И поскольку единственная цель withPropConnector(useProps, Landing) состоит в том, чтобы привязать реализацию useProps к компоненту, что и является прямым использованием крючка, я не вижу цели.

2. @подоконник Да, я мог бы использовать useProps его непосредственно внутри Landing компонента. Но я сделал это с помощью connector , чтобы я мог Landing модульно протестировать компонент непосредственно через props arg, вместо того, чтобы издеваться useProps при использовании непосредственно внутри Landing компонента

3. Тогда, возможно, родитель посадки мог бы использовать крючок и передать результат в качестве реквизита. Тогда у посадки был бы тот же api, что и здесь.

4. Да, это можно сделать, но useProps специально для этого Landing компонента. И если мы используем его в родительском компоненте , это может привести к повторному отображению в родительском компоненте, когда какие-либо данные хранилища изменяются, например isTypeOne , isTypeTwo или hasFetchedData .

5. Если useProps это специфично Landing , то его следует просто использовать Landing . Если вы не хотите его интернализовать ( для тестирования или чего -то еще), я предлагаю преобразовать его в специальный и просто ввести значения, которые он возвращает в качестве реквизита. По сути, это то, с чем вы все равно уже работаете withPropConnector . В принципе, у вас слишком много движущихся частей и ненужной сложности. Помните Принцип ПОЦЕЛУЯ (Держите Его Глупо Простым).

Метки: ,