React HOC简单用例..函数不返回有效的ReactElement（React.isValidElement（H））=== false(React HOC simple use

React HOC简单用例..函数不返回有效的ReactElement（React.isValidElement（H））=== false(React HOC simple use-case.. Function NOT returning valid ReactElement (React.isValidElement(H)) === false)

以下是一个简单的index.jsx。在底部，在Workspace的render（）方法中，{C}呈现。

在Workspace的渲染方法C中，子组件正在渲染，而包装器则不是。 console.log指示... React.isValidElement（W）=>返回FALSE。我在函数wrappedHOC（WrappedComponent）中缺少什么 - 它无法返回有效的React元素？我已经剥离了所有功能，除了WrappedComponent传递了SAME道具。

import React from "react"; import ReactDOM from "react-dom"; class Kid extends React.Component { constructor(props){ super(props); this.state = {}; this.handleClick = this.handleClick.bind(this); } handleClick(e) { console.log('clicked'); } render() { return ( <div onClick={this.handleClick}> <span>{`I, ${this.props.name}, ${this.props.power}`}</span><br/> </div> ) } } function wrapperHOC(WrappedComponent) { return class extends React.Component { constructor(props){ super(props); this.state = {}; } render() { return <WrappedComponent {...this.props} /> } } } class Workspace extends React.Component { render() { let C = <Kid name={'Wonder Woman'} power={'kill baddies'} /> let W = wrapperHOC(C); if (React.isValidElement(C)) { // is TRUE console.log("Child is valid React Component"); } if (React.isValidElement(W)) { // is FALSE console.log("Wrapper is also valid React Component"); } else { console.log("Wrapper is NOT valid React Component"); } return ( <div> <span> {C} </span> <hr/> <span> {W} </span> </div> ); } } ReactDOM.render(<Workspace />, document.querySelector("#container"));

有什么指针吗？

The following is a simple index.jsx. At the bottom, in Workspace's render() method, {C} renders.

In Workspace's render method, C, the child component is rendering, the wrapper is not. The console.log indicates... React.isValidElement(W) => returning FALSE. What am I missing in function wrappedHOC(WrappedComponent) - that it is failing to return a valid React Element? I have stripped all functionality, save passing the SAME props as the WrappedComponent had.

import React from "react"; import ReactDOM from "react-dom"; class Kid extends React.Component { constructor(props){ super(props); this.state = {}; this.handleClick = this.handleClick.bind(this); } handleClick(e) { console.log('clicked'); } render() { return ( <div onClick={this.handleClick}> <span>{`I, ${this.props.name}, ${this.props.power}`}</span><br/> </div> ) } } function wrapperHOC(WrappedComponent) { return class extends React.Component { constructor(props){ super(props); this.state = {}; } render() { return <WrappedComponent {...this.props} /> } } } class Workspace extends React.Component { render() { let C = <Kid name={'Wonder Woman'} power={'kill baddies'} /> let W = wrapperHOC(C); if (React.isValidElement(C)) { // is TRUE console.log("Child is valid React Component"); } if (React.isValidElement(W)) { // is FALSE console.log("Wrapper is also valid React Component"); } else { console.log("Wrapper is NOT valid React Component"); } return ( <div> <span> {C} </span> <hr/> <span> {W} </span> </div> ); } } ReactDOM.render(<Workspace />, document.querySelector("#container"));

Any pointers please?