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

javascript reactjs higher-order-components

2022-08-30 05:11:01

我写了一个高阶组件：

import React from 'react';


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

export default NewHOC;

我在我的应用程序中使用上述内容.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 子级无效。如果从渲染中返回组件而不是<组件 />，则可能会发生这种情况。或者，也许您打算调用此函数而不是返回它。在 NewHOC（由 App 创建）中，在 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>
    }
}

我做错了什么？

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

答案 2

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

假：

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

正确：

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

因此，现在MoviesList被识别为一个组件。