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

Question

我收到以下 ESLint 警告：

React Hook“useBuilderFeatureFlagContext”在函数“Slide.RenderBuilder”中调用，该函数既不是 React 函数组件，也不是自定义 React Hook 函数。

这是以下组件：

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;

这样，规则就可以正确检查钩子，并且您就拥有了所需的结构。

确保将其用作组件，否则您可能最终会违反钩子规则。