我正在尝试创建一个更高阶的组件，但不断收到这个 eslint 警告。
组件定义缺少显示名称
我尝试添加如下所示的显示名称，但它仍然抱怨。
import React from 'react';
const HOC = props => (WC) => {
WC.displayName = 'test'
return (
<WC />
);
}
export default HOC;
组件定义缺少 HOC 上的显示名称
IT技术
javascript
reactjs
2021-05-25 05:09:14
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是缺少 displayName 属性的组件。您上面的代码正在更改WC您不想要的 displayName 属性。
HOC.displayName = 'some higher component'
您的 HOC 应该将组件作为第一个参数而不是props，请参阅 React 文档中的示例：https : //reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for - 易于调试
编辑：您可以通过返回一个功能组件来传递它的props：
const HOC = WC => props => {
WC.displayName = 'test'
return (
<WC {...props} />
);
}
或者只是在设置后返回包装的组件displayName：
const HOC = WC => {
WC.displayName = 'test';
return WC;
}
其它你可能感兴趣的问题