默认情况下,react将组件名字作为displayname
const Mouseposition=withMouse(Position)
const MouseCat=withMouse(Cat)
[分析]
这两个代码都是调用了withMouse(wrappedComponent),返回的都是Mouse组件,返回的不同点就是Mouse组件渲染的内容不同.在这两种情况下,渲染出来的Mouse组件的展示名字都会是Mouse.这也就所谓的'默认情况下,react将组件名字作为displayname'
解决方案
步骤1:为Mouse组件设置一个displayName属性
Mouse.displayName=`WithMouse${getDisplayName(WrappedComponent)}`
这段代码包含WithMouse文本和调用了getDisplayName函数
步骤2:声明getDisplayName函数
function getDisplayName(WrappedComponent){
return WrappedComponent.displyName||WrappedComponent.name||'component'
}
如果传进来的组件的WrappedComponent.displyName属性存在则返回这个名称,否则进行第二步检索, 以此类推.
