研究ノートを反応させる---境界エラー処理

シナリオ：コンポーネントがロードされたエラーが発生する可能性がある場合は、他のコンポーネントはまだ正常に使用できるようにすることを、ページ全体のページの崩壊を望んでいません

エラーコンポーネント

import React, { Component } from 'react'

export default class Error extends Component {
    render() {
        return (
            <div>
                {null.map((ele,index) =>{
                    return <p key={index}>{ele}</p>
                })}
            </div>
        )
    }
}

エラー処理コンポーネント

import React, { Component } from 'react'

export default class ErrorBound extends Component {
   state = {
       hasError:false,
       error:null,
       errorInfo:null
   }
   //监听组件出错处理生命周期！！！！！！！！！
   componentDidCatch(error,errorInfo){
       this.setState({
            hasError:true,
            error,
            errorInfo
       })
   }

    render() {
       if(this.state.hasError){
           const {error,errorInfo} = this.state
            return (
                <div>
                    {this.props.render(error,errorInfo)}
                </div>
            )
       }
       return this.props.children
    }
}

ページ

import React, { Component } from 'react'
import Child from './child'
import Error from './Error'
import ErrorBound from './ErrorBound'

export default class Parent extends Component {
    render() {
        return (
            <div>
                我是parent
                <Child></Child>
                //！！！！！！！！！！！！！！
                <ErrorBound render={(error,errorInfo)=> <p>加载资源出错</p>}>
                  <Error></Error>
                </ErrorBound>
            </div>
        )
    }
}