栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

函数作为React子元素无效。如果返回Component而不是从render返回,则可能会发生这种情况

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

函数作为React子元素无效。如果返回Component而不是从render返回,则可能会发生这种情况

您将其用作常规组件,但实际上它是一个返回组件的函数。

尝试做这样的事情:

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中共享逻辑的不同方式和模式的文章



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/448874.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号