本文共 2553 字，大约阅读时间需要 8 分钟。

一. renderProps拓展

如何向组件内部动态传入带内容的结构（标签）？

React中:

• 使用children props: 通过组件标签体传入结构，但是有个问题：如果B组件需要A组件内的数据，那做不到。

  xxxx

• 使用render props: 通过组件标签属性传入结构，而且可以携带数据，一般用render函数属性。

 
    }>

例如案例：

import React, {    Component } from 'react'import './index.css'export default class Parent extends Component {       render() {           return (            
   
                
    
我是Parent组件
                
     } />            
   
        )    }}class A extends Component {       state = {    name: 'tom' }    render() {           const {    name } = this.state        return (            
    
                
     
我是A组件
                {   this.props.render(name)}            
    
        )    }}class B extends Component {       render() {           console.log('B---render')        return (            
    
                
     
我是B组件:{   this.props.name}
            
    
        )    }}

页面效果如下：

二. ErrorBoundary拓展

ErrorBoundary：用来捕获后代组件错误，渲染出备用页面。

其特点如下：

1. 只能捕获后代组件生命周期产生的错误。
2. 不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误。

案例：

Child组件：

import React, {    Component } from 'react'export default class Child extends Component {       state = {           users: '' // 根据下文的写法，users应该是个数组，每个元素是个对象，但是这里给了个空字符串，因此项目运行肯定会报错    }    render() {           return (            
   
                
    
Child组件
                {                       this.state.users.map((obj) => {                           return 
    
{   obj.name}----{   obj.name}
                    })                }            
   
        )    }}

Parent组件：

import React, {    Component } from 'react'import Child from './Child'export default class Parent extends Component {       state = {           hasError: ''// 用于标识子组件是否产生错误    }    // 当Parent的子组件出现报错的时候，会触发这个方法，并携带错误信息    static getDerivedStateFromError(error) {           console.log(error)        return {    hasError: error }    }    	// 一般用于统计页面的错误，并将请求发送到后台去。    componentDidCatch(error, info) {           console.log(error, info)    }    render() {           return (            
   
                
    
Parent组件
                {   this.state.hasError ? 
    
出错啦！
 : 
    }            
   
        )    }}

打包并运行：

npm run buildserve build

访问页面：(同时能看到成功捕捉到了对应的异常。)

三. 组件间通信方式总结

首先，React组件之间有什么关系呢？

• 父子组件
• 兄弟组件（非嵌套组件）
• 祖孙组件（跨级组件）

React组件之间的通信方式有：

• props：第一种：children props 第二种： render props

// children props  xxxx// render props 
    }>

• 消息订阅-发布：pubs-sub、event等等，查看
• Redux之间数据共享，查看
• Context：生产者-消费者模式

   	
    <子组件 />
   
   
      {       value => ( // value就是context中的value数据      要显示的内容    )  }