React中如何处理Iframe组件错误？实现子组件异常隔离

要实现子组件出错时仅在其区域显示错误提示、不影响父组件其他部分，你可以使用React的**错误边界（Error Boundary）**功能，这是React官方提供的捕获组件树错误并降级处理的方案。

步骤1：创建错误边界组件 #

错误边界必须是类组件（函数组件无法作为错误边界），它会捕获子组件树中的渲染错误、生命周期错误，并渲染自定义错误UI：

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  // 更新状态以显示错误UI
  static getDerivedStateFromError() {
    return { hasError: true };
  }

  // 可选：记录错误日志
  componentDidCatch(error, errorInfo) {
    console.error('PDF组件加载出错:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 自定义错误提示，匹配需求样式
      return (
        <div>
          <p>An error occurred with the PDF</p>
        </div>
      );
    }

    // 无错误时渲染子组件
    return this.props.children;
  }
}

export default ErrorBoundary;

步骤2：在父组件中用错误边界包裹子组件 #

修改父组件代码，将PDFcomponent放在错误边界组件内部，这样子组件的错误会被拦截，不会影响父组件其他区域：

import { Card, Col, Row } from "antd";
import PDFcomponent from "../../../components/PdfView/index";
import ErrorBoundary from './ErrorBoundary'; // 引入错误边界组件

function Index({data}) {
    return (
     <>
       <Row>
         <Col>
           <Col className="pdf">
             <ErrorBoundary>
               <PDFcomponent data={data} />
             </ErrorBoundary>
           </Col>
        
           <Col className="content">
            <h1>Hello World</h1>
            <p>This is content</p>
           </Col>
         </Col>
       </Row>
     </>
    );
}

export default Index;

额外注意事项 #

1. 事件处理错误：错误边界无法捕获事件处理函数中的错误（比如按钮点击事件里的错误），这类错误需要在子组件内部用try/catch处理：

   // 子组件示例：处理异步加载PDF的错误
   import { Col } from "antd";
   import UrlPDF from "./document";
   import { useEffect, useState } from 'react';
   
   function PdfComponent ({ data }) {
     const [pdfUrl, setPdfUrl] = useState('');
   
     useEffect(() => {
       const loadPDF = async () => {
         try {
           const url = await UrlPDF(data);
           setPdfUrl(url);
         } catch (error) {
           throw error; // 抛出错误让错误边界捕获
         }
       };
       loadPDF();
     }, [data]);
     
     return (
         <Col className='d-flex justify-content-center'>
             {/* 注意：原生iframe标签是小写的<iframe> */}
             <iframe
                 height="500"
                 src={pdfUrl}
                 width="500"
             />
         </Col>
     );
   }
   
   export default PdfComponent;
   

2. 原生标签修正：你子组件中的<Iframe>是错误写法，应该使用原生小写的<iframe>标签，否则会被React识别为自定义组件导致渲染错误。

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