Как использовать крючки реакции внутри специального компонента?

#javascript #reactjs #typescript

Вопрос:

У меня проблема с созданием специального компонента с крючками внутри.

Я пытаюсь найти правильное решение, чтобы не сломаться rules-of-hooks .

Если я изменю имя этого компонента, чтобы оно начиналось со строчного: withNetworkDetector вместо верхнего регистра, я не получу ошибок, но нарушил ли я тогда правило?

Будет ли тогда этот код безопасным?

 export const WithNetworkDetector = (Component: FClt;{}gt;) =gt; (props: any) =gt; {  const [isDisconnected, setIsDisconnected] = useState(false);   const handleConnectionChange = useCallback(() =gt; {  ...  setIsDisconnected(true);  }, []);     return (  lt;divgt;  {isDisconnected amp;amp; (  lt;Toast type="warning" text={TOAST_ERRORS.LOST_INTERNET_CONNECTION} /gt;  )}  lt;Component /gt;  lt;/divgt;  ); };   

Ответ №1:

Крючки можно использовать внутри функционального компонента React. Одним из критериев, классифицирующих функцию как функцию react, является имя, начинающееся в верхнем регистре, тогда только мы можем использовать его в качестве компонента React. Таким образом, это нарушит правило.