如何在React的HOC中结合useContext解决ESLint规则冲突问题？

问题分析 #

你遇到的两个ESLint错误原因分别是：

1. react/display-name：返回的匿名组件未设置显示名称，React无法识别组件标识，ESLint要求必须为组件指定displayName。
2. react-hooks/rules-of-hooks：你调整后的写法将return语句放在命名函数声明之前，虽然JS会提升函数声明，但这种非常规代码结构导致ESLint的hooks插件无法正确识别这是合法React组件，误判useContext的调用位置不符合规则。

正确修改方案 #

只需给返回的组件添加displayName，同时保证组件内的Hooks在顶层调用，代码结构符合常规写法即可。以下两种方案都可行：

方案一：箭头函数+显式设置displayName

import { useContext } from 'react';
import ThemeContext from './ThemeContext'; // 替换为你的上下文实际路径

export const withTheme = (WrappedComponent) => {
  const ThemedComponent = (props) => {
    const ctx = useContext(ThemeContext);
    return <WrappedComponent {...props} darkTheme={ctx.darkTheme} toggleTheme={ctx.toggleTheme} />;
  };

  // 设置带原组件名称的displayName，兼容无displayName的组件
  ThemedComponent.displayName = `withTheme(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
  
  return ThemedComponent;
};

方案二：命名函数+显式设置displayName

import { useContext } from 'react';
import ThemeContext from './ThemeContext';

export const withTheme = (WrappedComponent) => {
  function ThemedComponent(props) {
    const ctx = useContext(ThemeContext);
    return <WrappedComponent {...props} darkTheme={ctx.darkTheme} toggleTheme={ctx.toggleTheme} />;
  }

  ThemedComponent.displayName = `withTheme(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
  
  return ThemedComponent;
};

方案说明 #

• displayName的作用：既满足ESLint规则要求，还能让React DevTools显示更清晰的组件名称（如withTheme(Button)），方便调试。
• Hooks规则合规：useContext直接写在组件函数的顶层，未嵌套在条件、循环或嵌套函数中，完全符合React Hooks的调用规则。

内容的提问来源于stack exchange，提问作者Peter Kellner