1

我有一个组件创建功能：

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等）。

然而 eslint 抱怨使用useViewportCategory钩子并假装我无法运行应用程序：

React Hook "useViewportCategory" 在函数 "component: FunctionComponent" 中被调用，它既不是 React 函数组件也不是自定义 React Hook 函数 react-hooks/rules-of-hooks

有趣的是，在 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 规则，我该怎么做才能修复此错误？

4

1 回答 1

1

尝试用 PascalCase 编写函数：

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}</>
})

Lint 规则要求函数用 PascalCase 编写。

于 2020-02-01T11:55:33.277 回答