在既不是 React 函数组件也不是自定义 React Hook 函数的函数中调用 React Hook

Question

我有以下 ESLint 警告：

React Hook "useBuilderFeatureFlagContext" is called in function "Slide.RenderBuilder" that is neither a React function component nor a custom React Hook function.

这是以下组件：

Slide.RenderBuilder = ({ children }) => {
  const flags = useBuilderFeatureFlagContext();

  return (
    <>
      <SlideWrapper $flags={flags}>
        {children}
      </SlideWrapper>
      <ImageSetter attributeName="containerBackgroundImage" />
    </>
  );
};

如何编写可以将此特定案例列入白名单的规则？

Answer 1

如果可以，请先定义组件，然后将其添加到您的对象中。

const RenderBuilder = ({ children }) => {
  const flags = useBuilderFeatureFlagContext();

  return (/**/);
};

Slide.RenderBuilder = RenderBuilder;

这样，规则就可以正确地检查挂钩，并且您拥有了正在寻找的结构。

确保将其用作组件<Slide.RenderBuilder />，否则您可能最终会违反 hooks 规则。

在既不是 React 函数组件也不是自定义 React Hook 函数的函数中调用 React Hook

React Hook is called in function that is neither a React function component nor a custom React Hook function

javascript

reactjs

eslint

react-hooks