日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React錯誤邊界Error?Boundaries_React

作者：-耿瑞- ? 更新時間： 2023-03-25 編程語言

首先 我們先構建出問題的場景

我們創建一個react項目

然后在src下創建 components 文件夾目錄

在下面創建一個 error.jsx 組件

參開代碼如下

import React from "react";
export default class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
    }
  }
  render(){
    return (
      <div>
          { null.bingt }
      </div>
    )
  }
}

這時 就會有人說了 你這 null.bingt 不是擺明會報錯嗎？

沒錯 我們要的就是報錯

找到src下的 App.js 編寫代碼如下

import './App.css';
import React from "react";
import Error from "./components/error";
export default class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
    }
  }
  render(){
    return (
      <div>
          <span>你好</span>
          <Error/>
      </div>
    )
  }
}

運行之后 控制臺直接報錯 界面白屏 但其實 App組件上還有個你好啊 說明 整個項目都沒渲染出來

直接白屏 版本低一點的react還會出現報錯的專門的界面 但在上線之后 客戶看到的就是一片空白

但我們想 因為一個組件報錯 導致整個項目都運行不起來 這合理嗎？

顯然是不合理的

此時 我們可以在 components 目錄下創建 ErrorBoundary.jsx組件

參考代碼如下

import React from "react"
export default class ErrorBoundary extends React.Component{
    state = {
        hasError:false,
        error:null,
        errorInfo:null
    }
    componentDidCatch(error,errorInfo){
        this.setState({
            hasError:true,
            error:error,
            errorInfo:errorInfo
        })
    }
    render(){
        if(this.state.hasError){
            return <div>{ this.props.render(this.state.error,this.state.errorInfo) }</div>
        }
        return this.props.children;
    }
}

此時 我們的一個捕獲錯誤的組件就寫好了

然后 改寫 src下的 App.js

代碼如下

import './App.css';
import React from "react";
import Error from "./components/error";
import ErrorBoundary from "./components/ErrorBoundary";
export default class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
    }
  }
  render(){
    return (
      <div>
          <span>你好</span>
          <ErrorBoundary render ={ (error,errorInfo) => <p>{ '加載時發生錯誤' }</p>}>
              <Error/>
          </ErrorBoundary>
      </div>
    )
  }
}

此時 我們將ErrorBoundary捕獲報錯的組件 套在了Error外面

然后 編寫 當報錯時 就渲染

{ ‘加載時發生錯誤’ }

運行結果如下

控制臺依舊會輸出報錯信息 但 將不會運行到其他組件的渲染 而且 我們指定報錯后 渲染的

{ ‘加載時發生錯誤’ }

也成功渲染出來了

就是 之后我們指定可能某個組件 會報錯 就可以用這個組件套一下 避免一個組件報錯 整個項目白屏的情況

原文鏈接：https://blog.csdn.net/weixin_45966674/article/details/128756729

欄目分類
最近更新