React报错‘Functions are not valid as a React child’，高阶组件使用排查

这个问题我之前也碰到过，本质是你混淆了高阶组件（HOC）的使用方式和普通容器组件的用法～

为什么会出现这个警告？ #

先看你的NewHOC：它是一个函数，接收PassedComponent作为参数，返回一个新的React组件。这是标准的HOC结构，但HOC的定位是组件工厂函数——它是用来生成组件的工具，不是直接能在JSX里渲染的组件。

而你在App.js里把<NewHOC>当成普通组件使用，给它传递子元素<Movie/>，这完全不符合HOC的使用逻辑。React看到你尝试渲染NewHOC这个函数，就会抛出"Functions are not valid as a React child"的警告——因为它把函数当成了React子节点来处理，这是不允许的。

修复方案一：正确使用HOC的方式 #

修改App.js，先把Movie传入NewHOC生成增强后的组件，再渲染这个新组件：

import React from 'react';
import Movie from './movie/Movie';
import MyHOC from './hoc/MyHOC';
import NewHOC from './hoc/NewHOC';

// 用HOC包装Movie，生成新的增强组件
const EnhancedMovie = NewHOC(Movie);

export default class App extends React.Component {
  render() {
    return (
      <div>
        Hello From React!!
        {/* 渲染增强后的组件，正常传递props */}
        <EnhancedMovie name="Blade Runner" />
      </div>
    );
  }
}

这样NewHOC就能正确接收Movie组件作为参数，返回的增强组件会渲染Movie并传递所有props，完全符合HOC的设计意图。

修复方案二：改成普通容器组件（保留子元素写法） #

如果你更习惯用<NewHOC><Movie/></NewHOC>这种包裹式写法，那其实你不需要HOC，而是一个普通的容器组件。修改NewHOC的实现：

import React from 'react';

// 改成普通函数组件，接收children props
const NewHOC = ({ children }) => {
  return (
    <div>
      {children}
    </div>
  );
};

export default NewHOC;

这样你的App.js写法就可以保持不变，因为现在NewHOC是一个普通组件，负责渲染传入的子元素，不会再报错。

总结 #

要搞清楚HOC的本质：它是组件的高阶函数，是用来加工组件的工具，不是直接在JSX里渲染的组件。如果只是想做一个包裹其他组件的容器，用普通组件就行，不用HOC。

内容的提问来源于stack exchange，提问作者learner