函数作为 React 子元素无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况

IT技术 javascript reactjs higher-order-components
2021-03-20 18:14:30

我写了一个高阶组件：

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创建）在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>
    }
}

我究竟做错了什么？

6个回答

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

尝试做这样的事情：

const NewComponent = NewHOC(Movie)

你会像这样使用它：

<NewComponent someProp="someValue" />

这是一个运行示例：

Show code snippet

所以基本上NewHOC只是一个函数，接受一个组件，返回一个新的组件，渲染传入的组件。我们通常使用这种模式来增强组件并共享逻辑或数据。

您可以在文档中阅读有关 HOCS 的信息，我还建议您阅读有关react 元素和组件之间的区别的信息

我写了一篇关于在 React 中共享逻辑的不同方式和模式的文章。

在我的情况下，我忘记在react组件的渲染函数内的函数名称之后添加 ()

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

       return ctrl;
    };


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

更改渲染方法，因为它在错误消息中指出

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

解决了问题

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

错误的：

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

正确的：

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

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

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

这是我所拥有的：

ReactDOM.render(Header, headerContainer);

它应该是：

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

添加到 sagiv 的答案中，我们应该以一种可以包含所有子组件的方式创建父组件，而不是以您尝试返回的方式返回子组件。

尝试意向父组件并在其中传递props，以便所有孩子都可以像下面一样使用它

const NewComponent = NewHOC(Movie);

这里 NewHOC 是父组件，它的所有子组件都将使用电影作为props。

但是无论如何，你们已经为新的 React 开发人员解决了一个问题，因为这可能也是一个可能出现的问题，他们可以在这里找到解决方案。

其它你可能感兴趣的问题
上一篇通过 javascript/jquery 删除/截断前导零 下一篇等待光标在整个 html 页面上