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

小编典典

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

reactjs

我写了一个高阶组件：

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>
    }
}

我究竟做错了什么？

阅读 580

2020-07-22

共1个答案

小编典典

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

尝试做这样的事情：

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

2020-07-22