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

Question

我写了一个高阶组件:

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而不是render,则可能会发生这种情况.或许你打算调用这个函数而不是返回它.在App中由div(由App创建)中的NewHOC(由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>
    }
}

我究竟做错了什么？

Answer 1

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

错误的：

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

正确的：

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

所以现在MoviesList被识别为一个组件。

Answer 2

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

尝试做这样的事情:

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,我还建议您阅读反应元素和组件之间的区别

Answer 3

我也有这个错误。问题是如何调用该函数。

错误代码：

const Component = () => {
    const id = ({match}) => <h2>Test1: {match.params.id}</h2>
    return <h1>{id}</h1>;
};

而id是一个函数，所以：

正确代码：

return <h1>{id()}</h1>;

Answer 4

In my case i forgot to add the () after the function name inside the render function of a react component

public render() {
       let ctrl = (
           <>
                <div className="aaa">
                    {this.renderView}
                </div>
            </>
       ); 

       return ctrl;
    };


    private renderView() : JSX.Element {
        // some html
    };

Changing the render method, as it states in the error message to

        <div className="aaa">
            {this.renderView()}
        </div>

fixed the problem

Answer 5

我在按照此处的说明操作时遇到此错误：https ://reactjs.org/docs/add-react-to-a-website.html

这是我所拥有的：

ReactDOM.render(Header, headerContainer);

它应该是：

ReactDOM.render(React.createElement(Header), headerContainer);