У меня есть функция создания компонента:
import useViewportCategory from '../../../hooks/viewport/useViewportCategory'
type CreateViewportRestrictor = (
displayName: string,
settings: { showOnDesktop?: boolean, showOnTablet?: boolean, showOnMobile?: boolean },
) => FunctionComponent
const createViewportRestrictor: CreateViewportRestrictor = (
displayName,
{ showOnDesktop = false, showOnTablet = false, showOnMobile = false },
) => {
const component: FunctionComponent = ({ children }) => {
const viewportCategory = useViewportCategory()
if (viewportCategory === 'DESKTOP' && !showOnDesktop) return null
if (viewportCategory === 'MOBILE' && !showOnMobile ) return null
if (viewportCategory === 'TABLET' && !showOnTablet ) return null
return <>{children}</>
}
component.displayName = displayName
return component
}
, которую я использую для генерации компонентов для моего приложения (MobileOnly
, TabletOnly
, et c.).
Однако eslint жалуется на использование хука useViewportCategory
и мешает мне запустить приложение:
React Hook "useViewportCategory" вызывается в функции "component: FunctionComponent", которая не является ни функцией React компонент или пользовательская функция React Hook реагировать на хуки / правила хуков
Интересно, что приведение компонента в TypeScript исправляет ошибку:
const component: FunctionComponent = (({ children }) => {
const viewportCategory = useViewportCategory()
if (viewportCategory === DESKTOP && !showOnDesktop) return null
if (viewportCategory === MOBILE && !showOnMobile ) return null
if (viewportCategory === TABLET && !showOnTablet ) return null
return <>{children}</>
}) as FunctionComponent
Что здесь происходит ?
Почему es lint распознает компоненты функций, определенные непосредственно внутри области модуля, но не здесь?
Что можно сделать, чтобы исправить эту ошибку без приведения типа / отключения правила eslint?