您将其用作常规组件，但实际上它是一个返回组件的函数。
尝试做这样的事情：
const NewComponent = NewHOC(Movie)
您将像这样使用它：
<NewComponent someProp='someValue' />
这是一个正在运行的示例：
const NewHOC = (PassedComponent) => { return class extends React.Component { render() { return (<div> <PassedComponent {...this.props} /></div> ) } }}const Movie = ({name}) => <div>{name}</div>const NewComponent = NewHOC(Movie);function App() { return ( <div> <NewComponent name='Kill Bill' /> </div> );}const rootElement = document.getElementById('root');ReactDOM.render(<App />, rootElement);<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js'></script><div />
因此，基本上NewHOC只是一个接受组件并返回一个新组件的函数，该组件将呈现传入的组件。我们通常使用此模式来增强组件并共享逻辑或数据。
您可以在文档中阅读有关HOCS的信息，我也建议您阅读有关react元素和组件之间差异的信息
我写了一篇关于在React中共享逻辑的不同方式和模式的文章
解决方法我写了一个高阶组件：
import React from ’react’;const NewHOC = (PassedComponent) => { return class extends React.Component {render(){ return (<div> <PassedComponent {...this.props}/></div> )} }}export default NewHOC;
我在我的App.js中使用以上内容：
import React from ’react’;import Movie from ’./movie/Movie’;import MyHOC from ’./hoc/MyHOC’;import NewHOC from ’./hoc/NewHOC’;export default class App extends React.Component { render() { return ( <div> Hello From React!! <NewHOC><Movie name='Blade Runner'></Movie> </NewHOC> </div> ); } }
但是，我得到的警告是：
警告：函数作为React子代无效。如果您从渲染返回一个Component而不是，则可能会发生这种情况。或者，也许您打算调用此函数而不是返回它。在应用程序的div（由应用程序创建）中的NewHOC（由应用程序创建）中
Movie.js文件为：
import React from 'react';export default class Movie extends React.Component{ render() {return <div> Hello from Movie {this.props.name} {this.props.children}</div> }}
我究竟做错了什么？
