react组件通信

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

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

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

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

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

示例代码：

  1. import React, {  Component } from 'react'
  2. export default class State extends Component { 
  3.     state = { 
  4.         num :100
  5.     }
  6.     addNum(){ 
  7.         var n = this.state.num;
  8.         n++;
  9.         this.setState({  num : n },()=>{ 
  10.             console.log(this.state.num,1111111111)//在回调函数中可以获取到state中最新的数据
  11.         })
  12.         console.log(this.state.num,222222222222)//此时获取到的数据不是最新的
  13.     }
  14.     render() { 
  15.         return (
  16.             <div>
  17.                 <h2>数量：{  this.state.num }</h2>
  18.                 <button onClick={  ()=>this.addNum() }>点击增加</button>
  19.             </div>
  20.         )
  21.     }
  22. }

二、组件通信

1.父子组件

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

(1)父组件

  1. import React, {  Component } from 'react'
  2. import Child from './Child'
  3. export default class Parent extends Component { 
  4.     state = { 
  5.         msg : '天道酬勤'
  6.     }
  7.     render() { 
  8.         return (
  9.             <div>
  10.                 <h1>这是父组件</h1>
  11.                 <hr/>
  12.                 <Child data={ this.state.msg} />
  13.             </div>
  14.         )
  15.     }
  16. }

(2)子组件

  1. import React, { Component } from 'react'
  3. class Child extends Component {
  4.     render() {
  5.         return (
  6.             <div>
  7.                 <h2>这是子组件</h2>
  8.                 {/* 通过this.props来获取父组件传递的数据 */}
  9.                 <p>父组件的内容：{ this.props.data }</p>
  10.             </div>
  11.         )
  12.     }
  13. }
  14. export default Child;

2.子父组件

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

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

  1. import React, {  Component } from 'react'
  2. import Child from './Child'
  3. export default class Parent extends Component { 
  4.     state = { 
  5.         msg : '天道酬勤',
  6.         str:''
  7.     }
  8.     getStr(e){ 
  9.         this.setState({  str:e })
  10.     }
  11.     render() { 
  12.         return (
  13.             <div>
  14.                 <h1>这是父组件</h1>
  15.                 <p>子组件：{  this.state.str }</p>
  16.                 <hr/>
  17.                 <Child data={ this.state.msg} sendStr={  (str)=>this.getStr(str) } />
  18.             </div>
  19.         )
  20.     }
  21. }

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

  1. import React, {  Component } from 'react'
  2. class Child extends Component { 
  3.     send(){ 
  4.         console.log(this)
  5.         //调用父组件传递的函数
  6.         this.props.sendStr('这是子组件的数据');
  7.     }
  8.     render() { 
  9.         return (
  10.             <div>
  11.                 <h2>这是子组件</h2>
  12.                 { /* 通过this.props来获取父组件传递的数据 */}
  13.                 <p>父组件的内容：{  this.props.data }</p>
  14.                 <button onClick={  ()=>this.send() }>反馈数据</button>
  15.             </div>
  16.         )
  17.     }
  18. }
  19. export default Child;

3.非父子组件

(1)设置一个公用容器

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

  1. const EventEmitter = require('events');
  2. const MyEvent = new EventEmitter();
  3. export default MyEvent;

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

/src/index.js

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

(3)页面组件中使用

①数据发生端

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

②数据接收端

  1. constructor(){ 
  2.     super();
  3.     this.bus.on('事件名称',(形参)=>{ 
  4.         ...
  5.     })
  6. }

发表评论

表情：
评论列表 （有 0 条评论，283人围观）

还没有评论，来说两句吧...

相关阅读

    相关 react组件通信

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

    末蓝、末蓝、/ 0 赞/ 284 阅读