您将其用作常规组件,但实际上它是一个返回组件的函数。
尝试做这样的事情:
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 id="root"/>因此,基本上
NewHOC只是一个接受组件并返回一个新组件的函数,该组件将呈现传入的组件。我们通常使用此模式来增强组件并共享逻辑或数据。
您可以在文档中阅读有关HOCS的信息,我也建议您阅读有关react元素和组件之间差异的信息
我写了一篇关于在React中共享逻辑的不同方式和模式的文章



