Question

我正在尝试创建一个更高阶的组件，但不断出现这种警告。

组件定义缺少显示名称

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

import React from 'react';

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

export default HOC;

Answer 1

您的HOC应该将组件作为第一个参数而不是props，请参见React文档中的示例：https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging

编辑：您可以通过返回功能组件来传递其道具：

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

或者仅在设置displayName之后返回包装的组件：

const HOC = WC => {
  WC.displayName = 'test';
  return WC;
}

Answer 2

HOC是缺少displayName属性的组件。您上面的代码正在更改您不需要的WC的displayName属性。

HOC.displayName = 'some higher component'

Answer 3

您需要纠正两件事。

首先：修正功能组件声明的顺序。

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

组件定义缺少HOC

3 个答案: