HOC 上的组件定义缺少显示名称

我正在尝试创建一个更高阶的组件，但不断收到此 eslint 警告。

组件定义缺少显示名称

我尝试添加如下所示的显示名称，但它仍然抱怨。

import React from 'react';

const HOC = props => (WC) => {
  WC.displayName = 'test'
  return (
    <WC />
  );
}

export default HOC;

有两件事你需要纠正。

First:修复功能组件声明的顺序。

Second:将 displayName 设置为从 HOC 返回的组件

const HOC = WC => {
  const MyComp = (props) => {
    return (
        <WC {...props} />
      );
  }
  MyComp.displayName = 'test'
  return MyComp;
}

一旦您进行了上述更改。你只需要像这样使用 HOC

const MyCompWithHoc = HOC(CompA);

并将其渲染为

<MyCompWithHoc propsA={'A'} {...otherPropsYouWantToPass} />