react组件通信

末蓝、 2022-12-05 10:20 224阅读 0赞

## 一、状态机setState是一个异步操作 ##

setState用来修改state中的初始状态，但是它异步操作，不能在setState之后马上获取到最新的数据。可以使用setState的第二个参数来获取到最新的数据

setState(要修改的数据对象,()=>{...})

在第二个参数（回调函数）中可以获取到state中最新的数据。

示例代码：

import React, {  Component } from 'react'
    export default class State extends Component { 
        state = { 
            num :100
        }
        addNum(){ 
            var n = this.state.num;
            n++;
            this.setState({  num : n },()=>{ 
                console.log(this.state.num,1111111111)//在回调函数中可以获取到state中最新的数据
            })
            console.log(this.state.num,222222222222)//此时获取到的数据不是最新的
        }
        render() { 
            return (
                <div>
                    <h2>数量：{  this.state.num }</h2>
                    <button onClick={  ()=>this.addNum() }>点击增加</button>
                </div>
            )
        }
    }

## 二、组件通信 ##

### 1.父子组件 ###

在父组件使用子组件时，通过自定义属性进行数据的传递，在子组件中通过props来接收。

(1)父组件

import React, {  Component } from 'react'
    import Child from './Child'
    export default class Parent extends Component { 
        state = { 
            msg : '天道酬勤'
        }
        render() { 
            return (
                <div>
                    <h1>这是父组件</h1>
                    <hr/>
                    <Child data={ this.state.msg} />
                </div>
            )
        }
    }

(2)子组件

import React, { Component } from 'react'
    
    class Child extends Component {
        render() {
            return (
                <div>
                    <h2>这是子组件</h2>
                    {/* 通过this.props来获取父组件传递的数据 */}
                    <p>父组件的内容：{ this.props.data }</p>
                </div>
            )
        }
    }
    export default Child;

### 2.子父组件 ###

使用自定义事件来实现子父组件通信

在父组件使用子组件时，传递一个自定义事件，用来让子组件触发或者进行数据的传递

import React, {  Component } from 'react'
    import Child from './Child'
    export default class Parent extends Component { 
        state = { 
            msg : '天道酬勤',
            str:''
        }
        getStr(e){ 
            this.setState({  str:e })
        }
        render() { 
            return (
                <div>
                    <h1>这是父组件</h1>
                    <p>子组件：{  this.state.str }</p>
                    <hr/>
                    <Child data={ this.state.msg} sendStr={  (str)=>this.getStr(str) } />
                </div>
            )
        }
    }

在子组件中，通过this.props.自定义事件名 来触发父组件的函数并传递参数

import React, {  Component } from 'react'
    class Child extends Component { 
        send(){ 
            console.log(this)
            //调用父组件传递的函数
            this.props.sendStr('这是子组件的数据');
        }
        render() { 
            return (
                <div>
                    <h2>这是子组件</h2>
                    { /* 通过this.props来获取父组件传递的数据 */}
                    <p>父组件的内容：{  this.props.data }</p>
                    <button onClick={  ()=>this.send() }>反馈数据</button>
                </div>
            )
        }
    }
    export default Child;

### 3.非父子组件 ###

(1)设置一个公用容器

创建/src/bus.js，并引入events类中的EventEmitter事件监听器

const EventEmitter = require('events');
    const MyEvent = new EventEmitter();
    export default MyEvent;

(2)在项目启动文件中进行Component原型的挂载

/src/index.js

import React,{  Component } from 'react';
    import bus from './bus'
    Component.prototype.bus = bus;//将容器挂载到Component的原型上

(3)页面组件中使用

①数据发生端

this.bus.emit('事件名称','要传递的数据')

②数据接收端

constructor(){ 
        super();
        this.bus.on('事件名称',(形参)=>{ 
        	...
        })
    }