React---新扩展RenderProps和ErrorBoundary

2021年09月15日 阅读数:3
这篇文章主要向大家介绍React---新扩展RenderProps和ErrorBoundary,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

 1、render props

1.如何向组件内部动态传入带内容的结构(标签)?

 

    Vue中: 
        使用slot技术, 也就是经过组件标签体传入结构  <AA><BB/></AA>
    React中:
        使用children props: 经过 组件标签体传入结构
        使用render props: 经过 组件标签属性传入结构, 通常用render函数属性

 

2.children props
    <A>
      <B>xxxx</B>
    </A>
    {this.props.children}
    问题: 若是B组件须要A组件内的数据, ==> 作不到 
3.render props
    <A  render={(data) => <C data={data}></C>}></A>
    A组件: {this.props.render(内部state数据)}
    C组件: 读取A组件传入的数据显示 {this.props.data} 
4.代码
 1 import React, { Component } from 'react'
 2 import './index.css'
 3 import C from '../1_setState'
 4 
 5 export default class Parent extends Component {
 6     render() {
 7         return (
 8             <div className="parent">
 9                 <h3>我是Parent组件</h3>
10                 <A render={(name)=><C name={name}/>}/>
11             </div>
12         )
13     }
14 }
15 
16 class A extends Component {
17     state = {name:'tom'}
18     render() {
19         console.log(this.props);
20         const {name} = this.state
21         return (
22             <div className="a">
23                 <h3>我是A组件</h3>
24                 {this.props.render(name)}
25             </div>
26         )
27     }
28 }
29 
30 class B extends Component {
31     render() {
32         console.log('B--render');
33         return (
34             <div className="b">
35                 <h3>我是B组件,{this.props.name}</h3>
36             </div>
37         )
38     }
39 }

2、ErrorBoundary错误边界

1. 理解:

  错误边界:用来捕获后代组件错误,渲染出备用页面

2. 特色:

  只能捕获后代组件生命周期产生的错误,不能捕获本身组件产生的错误和其余组件在合成事件、定时器中产生的错误

3. 使用方式:

  getDerivedStateFromError配合componentDidCatch
 
  // 生命周期函数,一旦后台组件报错,就会触发
  static  getDerivedStateFromError(error) {
      console.log(error);
      // 在render以前触发
      // 返回新的state
      return {
          hasError: true,
      };
  }

   componentDidCatch(error, info) {
      // 统计页面的错误。发送请求发送到后台去
      console.log(error, info);
  }
4. 代码
(1)child.jsx
 1 import React, { Component } from 'react'
 2 
 3 export default class Child extends Component {
 4     state = {
 5         users:[
 6             {id:'001',name:'tom',age:18},
 7             {id:'002',name:'jack',age:19},
 8             {id:'003',name:'peiqi',age:20},
 9         ]
10         // users:'abc'
11     }
12 
13     render() {
14         return (
15             <div>
16                 <h2>我是Child组件</h2>
17                 {
18                     this.state.users.map((userObj)=>{
19                         return <h4 key={userObj.id}>{userObj.name}----{userObj.age}</h4>
20                     })
21                 }
22             </div>
23         )
24     }
25 }

(2)parent.jsxcss

 1 import React, { Component } from 'react'
 2 import Child from './Child'
 3 
 4 export default class Parent extends Component {
 5 
 6     state = {
 7         hasError:'' //用于标识子组件是否产生错误
 8     }
 9 
10     //当Parent的子组件出现报错时候,会触发getDerivedStateFromError调用,并携带错误信息
11     static getDerivedStateFromError(error){
12         console.log('@@@',error);
13         return {hasError:error}
14     }
15 
16     componentDidCatch(){
17         console.log('此处统计错误,反馈给服务器,用于通知编码人员进行bug的解决');
18     }
19 
20     render() {
21         return (
22             <div>
23                 <h2>我是Parent组件</h2>
24                 {this.state.hasError ? <h2>当前网络不稳定,稍后再试</h2> : <Child/>}
25             </div>
26         )
27     }
28 }

 

 

 


本文同步分享在 博客“半指温柔乐”(CNBlog)。
若有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一块儿分享。react