函数作为 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 而不是 。或者可能 你的意思是调用这个函数而不是返回它。 在NewHOC中（由App创建） 在div中（由App创建） 在应用程序中

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

我究竟做错了什么？

我也遇到了这个错误，因为我在路由时没有使用正确的 snytax。这是在我的 App.js 下部分：

False:

<Route path="/movies/list" exact element={ MoviesList } />

Correct:

<Route path="/movies/list" exact element={ <MoviesList/> } />

所以现在电影列表被识别为一个组件。