React 17.0.2实现HOC报错：Element type is invalid 期望字符串/类/函数却得到object

报错信息 #

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

形成原因 #

你编写的withPointlessHOC不符合高阶组件的核心定义：高阶组件是接收组件为输入、返回新组件的函数，但你当前的实现直接返回了JSX元素（本质是普通JS对象），而非可执行的函数/类组件。
你在App.js中调用withPointlessHOC(App)时，得到的是已经生成好的div元素对象，当index.js尝试将该对象作为组件用<App />语法渲染时，React无法将对象识别为合法的组件类型，因此抛出类型校验错误。

修复方法 #

仅需要修改withPointlessHOC.js的实现，让它返回一个函数组件即可：

import React from 'react'

export default function withPointlessHOC(component) {
    const Component = component
    // 返回函数组件，而非直接返回JSX
    return function WrappedComponent(props) {
        return (
            <div>
                {/* 透传props保证原组件的参数接收能力 */}
                <Component {...props} />
            </div>
        )
    }
}

修改后其余代码无需调整，withPointlessHOC(App)返回的是合法的函数组件，可被React正常渲染。

内容的提问来源于stack exchange，提问作者Julio Spinelli