函数作为React子元素无效.如果您返回Component而不是从render返回，则可能会发生这种情况 [英] Functions are not valid as a React child. This may happen if you return a Component instead of from render

问题描述

我写了一个高阶组件:

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而不是< 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>
    }
}

我在做什么错了?

解决方案

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

尝试执行以下操作:

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

I have written a Higher Order Component:

import React from 'react';


const NewHOC = (PassedComponent) => {
    return class extends React.Component {
        render(){
            return (
                <div>
                    <PassedComponent {...this.props}/>
                </div>
            )
        }
    }
}

export default NewHOC;

I am using the above in my 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>
   );
  }
 }

But, the warning I am getting is:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. in NewHOC (created by App) in div (created by App) in App

The Movie.js file is:

import React from "react";

export default class Movie extends React.Component{
    render() {
        return <div>
            Hello from Movie {this.props.name}
            {this.props.children}</div>
    }
}

What am I doing wrong?

解决方案

You are using it as a regular component, but it's actually a function that returns a component.

Try doing something like this:

const NewComponent = NewHOC(Movie)

And you will use it like this:

<NewComponent someProp="someValue" />

Here is a running example:

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"/>

So basically NewHOC is just a function that accepts a component and returns a new component that renders the component passed in. We usually use this pattern to enhance components and share logic or data.

You can read about HOCS in the docs and I also recommend reading about the difference between react elements and components

I wrote an article about the different ways and patterns of sharing logic in react.

这篇关于函数作为React子元素无效.如果您返回Component而不是从render返回，则可能会发生这种情况的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！