创建高阶组件时遇ESLint警告：组件定义缺少displayName

这个问题我之前也碰到过，核心是你搞混了需要添加displayName的对象——ESLint提示的是HOC返回的那个匿名组件函数缺少名称，而不是你修改的被包装组件（WC）。

问题分析 #

你的HOC是柯里化结构：先接收外部props，再返回一个接收被包装组件的函数，最后返回渲染被包装组件的匿名组件。ESLint无法识别这个最后返回的匿名组件，所以抛出警告。你之前给WC设置displayName的操作，其实是修改了原组件的名称，和HOC返回的新组件无关。

正确解决方案 #

我们需要给HOC最终返回的那个组件函数添加displayName，并且推荐包含原组件的名称，这样在React DevTools里能清晰看到组件层级：

import React from 'react';

const HOC = props => (WrappedComponent) => {
  // 定义HOC返回的增强组件
  const EnhancedComponent = () => {
    // 别忘了把HOC接收的props传递给被包装组件
    return <WrappedComponent {...props} />;
  };

  // 设置displayName，优先用原组件的displayName，其次是name属性，最后兜底为Component
  EnhancedComponent.displayName = `HOC(${
    WrappedComponent.displayName || WrappedComponent.name || 'Component'
  })`;

  return EnhancedComponent;
};

export default HOC;

简化写法（直接给匿名函数加displayName） #

如果不想额外定义变量，也可以直接给返回的匿名函数添加displayName：

import React from 'react';

const HOC = props => (WrappedComponent) => {
  const component = () => <WrappedComponent {...props} />;
  component.displayName = `HOC(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
  return component;
};

export default HOC;

额外提醒 #

你的原代码里没有把HOC接收的props传递给WC，这会导致被包装组件无法获取这些外部props，所以一定要加上{...props}哦。

内容的提问来源于stack exchange，提问作者me-me