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

Question

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

组件定义缺少显示名称

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

import React from 'react';

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

export default HOC;

Answer 1

你需要纠正两件事。

第一：修复功能组件声明的顺序。

第二：设置 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} />