React ErrorBoundary集成失败：函数作为React子元素报错求助

你写的WithErrorBoundary是高阶组件（HOC），本质是一个返回组件的函数，但你在app.jsx里把它当成普通React组件直接用<ErrorBoundary>渲染了——React不允许把函数作为子元素，这就是控制台警告和空白页的核心原因。

有两种方式解决，根据你的需求选择：

方式1：改成直接可用的ErrorBoundary组件（推荐） #

修改ErrorBoundry.jsx，直接导出一个能接收children的类组件，去掉HOC的嵌套结构：

import React, { Component } from 'react'
import ErrorPage from '../../ErrorPage'

class ErrorBoundary extends Component {
    state = { error: null }

    componentDidCatch(error, errorInfo) {
        this.setState({ error })
        // 可在此添加错误上报逻辑
        console.error('捕获到组件错误:', error, errorInfo)
    }

    render() {
        if (this.state.error) {
            return <ErrorPage />
        }
        // 渲染包裹的子内容
        return this.props.children
    }
}

export default ErrorBoundary;

之后在app.jsx里正常导入使用即可（如果用lazy记得配合Suspense）：

import ErrorBoundary from './components/core/ErrorBoundary/ErrorBoundry';
// 或用lazy导入：
// const ErrorBoundary = lazy(() => import('./components/core/ErrorBoundary/ErrorBoundry'));

// 若用lazy，需包裹在Suspense内
// <Suspense fallback={<div>加载中...</div>}>
<ErrorBoundary>
  <Switch>
    {/* 你的路由代码 */}
  </Switch>
</ErrorBoundary>
// </Suspense>

方式2：保留HOC结构，正确调用生成组件 #

如果你想保留原HOC的设计，需要先调用HOC生成可渲染的组件，再用来包裹内容：

// 导入HOC
const WithErrorBoundary = lazy(() => import('./components/core/ErrorBoundary/ErrorBoundry'));

// 调用HOC生成能接收children的组件
const ErrorBoundaryComponent = WithErrorBoundary()(({children}) => <>{children}</>);

// 配合Suspense使用
<Suspense fallback={<div>加载中...</div>}>
  <ErrorBoundaryComponent>
    <Switch>
      {/* 你的路由代码 */}
    </Switch>
  </ErrorBoundaryComponent>
</Suspense>

使用lazy导入组件时，必须用React.Suspense包裹，这是React懒加载的强制要求，也是可能导致空白页的潜在隐患。

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