为什么我开发的React HOC高阶组件没有按照预期正常工作？

问题原因 #

• 核心报错原因：HOC中渲染传入的组件时，变量名originalComponent首字母为小写，React会将小写开头的标签识别为原生HTML标签，不会当做你传入的自定义组件处理，直接导致组件无法正常渲染。
• 潜在问题：目前只给被包裹的组件传递了固定的name属性，没有透传HOC组件自身接收到的所有props，后续如果从外层给ClickCounter/HoverMouseCounter传递其他参数都会丢失。

修正方案 #

直接修改hocCounter.js的代码即可修复当前运行异常：

import React from 'react'

// 参数名改为大写开头，符合React组件命名规范
const updatedComponent = OriginalComponent => {
    class newComponent extends React.Component {
        render(){
            // 渲染时先透传所有外部传入的props，再补充你要传递的自定义属性
            return <OriginalComponent {...this.props} name='Harsh'/>
        }
    }
    return newComponent
}

export default updatedComponent

如果后续要实现计数逻辑抽离到HOC的需求，只需要把两个业务组件内的counter状态、计数方法都迁移到HOC中，再通过props传递给被包裹的组件即可，就能消除两个组件的重复逻辑。

内容的提问来源于stack exchange，提问作者Harsh Sharma