React高阶组件(HOC)导出报错：函数不可作为React子元素问题排查

你遇到的这个警告，核心原因是你的高阶组件（HOC）调用方式不符合它的定义结构。咱们一步步拆解：

首先看你的LoadingHOC定义，它是一个柯里化的函数：

const LoadingHOC = loadingProp => WrappedComponent => {
  // 返回包装后的组件
};

这个结构的执行逻辑是：

• 第一步：传入loadingProp（比如你的"contacts"），返回一个新的函数
• 第二步：把这个新函数传入WrappedComponent（你的Feed组件），才会返回最终可以被React渲染的组件类

而你现在的导出语句是：

export default LoadingHOC("contacts", Feed);

这相当于只执行了柯里化的第一层——你给LoadingHOC传了两个参数，但它只接收第一个loadingProp，返回的是那个等待接收WrappedComponent的函数。React尝试渲染这个返回的函数时，就会抛出"Functions are not valid as a React child"的警告，因为它期望的是React元素或组件，而不是一个普通函数。

正确的调用方式 #

你需要分两次调用这个柯里化函数：

export default LoadingHOC("contacts")(Feed);

第一次调用LoadingHOC("contacts")得到一个专门处理"contacts"这个prop的HOC函数，第二次把Feed组件传入这个函数，最终得到包装好的组件，这样React就能正常渲染了。

更直观的拆分写法 #

你也可以把它拆成两行写，逻辑会更清晰：

// 先创建针对"contacts"的专属HOC
const withContactsLoading = LoadingHOC("contacts");
// 再用这个HOC包装Feed组件
export default withContactsLoading(Feed);

这种写法和上面的一行写法效果完全一致，只是能更直观地看到柯里化的两步执行过程。

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