react-高阶组件(2)-问题:displayname名字相同解决方案

默认情况下,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属性存在则返回这个名称,否则进行第二步检索, 以此类推.