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

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

React錯誤邊界Error?Boundaries_React

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

首先 我們先構(gòu)建出問題的場景

我們創(chuàng)建一個react項目

然后在src下創(chuàng)建 components 文件夾目錄

在下面創(chuàng)建一個 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還會出現(xiàn)報錯的專門的界面 但在上線之后 客戶看到的就是一片空白

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

顯然是不合理的

此時 我們可以在 components 目錄下創(chuàng)建 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>{ '加載時發(fā)生錯誤' }</p>}>
              <Error/>
          </ErrorBoundary>
      </div>
    )
  }
}

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

然后 編寫 當(dāng)報錯時 就渲染

{ ‘加載時發(fā)生錯誤’ }

運行結(jié)果如下

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

{ ‘加載時發(fā)生錯誤’ }

也成功渲染出來了

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

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

欄目分類
最近更新