react 的错误边界

最新推荐文章于 2025-03-22 20:49:57 发布

原创最新推荐文章于 2025-03-22 20:49:57 发布

· 522 阅读

1 ·

版权

文章标签：

#react.js #javascript #前端

react 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了React中的错误边界，它是一个class组件，用于捕获子组件树中的JavaScript错误，并打印错误信息。错误边界的实现依赖于`static getDerivedStateFromError()`或`componentDidCatch()`生命周期方法。通过这些方法，可以在组件发生错误时渲染备用UI，避免整个子组件树崩溃。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react 的错误边界是一个 class 组件

作用：捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。
使用：如果一个 class 组件中定义了 static getDerivedStateFromError() 或 componentDidCatch() 这两个生命周期方法中的任意一个（或两个）时，那么它就变成一个错误边界。
案例

import React, { Component } from 'react'

type FallbackRender = (props: {error:  Error | null }) => React.ReactElement;

export class ErrorBoundary extends React.Component<React.PropsWithChildren<{ fallbackRender: FallbackRender }>, any>{
    state = {
        error: null
    }

	// 捕捉错误，改变 error 的状态
    static getDerivedStateFromError(error: Error){
        return { error }
    }

    render(){
        const { error } = this.state;
        const { fallbackRender, children } = this.props;
        if(error){
            return fallbackRender(error);
        }
        return children;
    }
}

// 使用错误边界组件
<ErrorBoundary fallbackRender={/*某个备用UI组件*/}>
	<App />
</ErrorBoundary>