javascript - 组件定义在 HOC 上缺少显示名称

Question

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

component definition is missing display name

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

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} />