高阶组件返回的Class无法渲染出来。

Question

使用高阶组件返回class包装后的组件无法正确渲染，但是直接将组件return可以渲染出来，找不出问题，请指教一下。多谢大家

function HOC(WrappedComponent){
    // 渲染不出来
    return class HOC extends Component {
        render(){
            const newProps = {type:'HOC'};
            return <WrappedComponent {...this.props} {...newProps}/>
        }
    }
    // 以下可以
    // return function newRender(props){
    //     return <WrappedComponent />
    // }
}

class OriginComponent extends Component {
    render(){
        return <div>这是原始组件</div>
    }
}

const newComponent = HOC(OriginComponent)

class TestHOCCom extends Component{
    constructor(){
        super()
        this.state = {
        }
    }
    render() {
        // console.log(newComponent, 9999999)
        return (
            <div>
                <p>顶层容器</p>
                <newComponent />
            </div>
        )
    }
}
export default TestHOCCom

Answer 1

const NewComponent = HOC(OriginComponent)
<NewComponent />

一定要用大写的首字母, 要不 jsx 会把它编译成字符串标签.