2022-07-15 工作记录--JS-实现所有组件间的通信

JS-实现所有组件间的通信

通过JS里的方法实现所有组件间的通信，下面以react为例🌰，如下：👇🏻

• 实现效果：点击无库存弹窗noInventoryPopover里的「再抽一次」按钮，实现首页homePage里的转盘抽奖。

第一步、发送事件

当你🥕想把某个方法抛出去时，发送事件，并取唯一的事件名【要在组件的componentWillUnmount中移除事件】：见代码里的【1】【2】 👇🏻

• 通过document.addEventListener("自定义事件名", 方法, this); 发送事件 ⭐️
  • 举例 ✍🏻：发送事件 —— 名为"drawPrize"，方法为 this.clickStart
    • document.addEventListener("drawPrize", this.clickStart, this);
      
• 通过document.removeEventListener("自定义事件名", 方法, this); 移除事件 ⭐️
  • 举例 ✍🏻：移除事件 —— 名为"drawPrize"，方法为 this.clickStart
    • document.removeEventListener("drawPrize", this.clickStart, this);
      

首页homePage.jsx

'use strict';

import React,{Component} from 'react';


class HomePage extends Component {

  componentDidMount() {
    document.addEventListener("drawPrize", this.clickStart, this); // 【1】发送事件"drawPrize"——抽奖
  }

  componentWillUnmount() {
    document.removeEventListener("drawPrize", this.clickStart, this); // 【2】移除事件
  }

  // 开始抽奖
  clickStart = (e) => {
  	console.log('开始抽奖咯~');
  	const { param } = e.detail;
	console.log('获取到传递的参数: ',param); // 获取到传递的参数: 我是需要传递的参数param
  }

  render() {
    return (
      <div className="homePage"></div>
    );
  }
}

export default HomePage;

第二步、接收事件

当你🥕想接收到上面抛出的事件并调用其方法 / 传递参数时：见代码里的【3】 👇🏻

• 通过document.dispatchEvent(new CustomEvent("对应事件名", {detail: 参数对象})); 接收事件 ⭐️
  • 【不传递参数】 举例 ✍🏻：接收事件 —— 名为"drawPrize"，调用的方法为 this.clickStart
    • document.dispatchEvent(new CustomEvent("drawPrize", {}));
  • 【传递参数】 举例 ✍🏻：接收事件 —— 名为"drawPrize"，调用的方法为 this.clickStart，并向该方法传递参数param
    • document.dispatchEvent(new CustomEvent("drawPrize", {detail: {param: '我是需要传递的参数param'}}));
      

无库存弹窗noInventoryPopover.jsx

import React,{Component} from 'react';

class NoInventoryPopover extends Component {

  // 点击「再抽一次」
  tryAgain = () => {
    // 若有抽奖次数，点击后触发抽奖；若无抽奖次数，toast“抽奖次数不足，完成任务获得更多~”
    const { gameCount } = store?.treasureInfo || {}; // gameCount：游戏次数
    console.log('游戏次数: ',gameCount);
    if(gameCount>0) { // 抽奖次数充足
      modalStore.closePop('NoInventoryPopover'); // 关闭弹窗
      /** 【3】接收事件 */
      document.dispatchEvent(new CustomEvent("drawPrize", {detail: {param: '我是需要传递的参数param'}}));
    } else { // 抽奖次数不足
      Toast('抽奖次数不足，完成任务获得更多~');
    }
  }


  render() {
    return (
      <div className="noInventoryPopover">
        {/* 按钮-再抽一次 */}
        <span className="button" onClick={this.tryAgain}></span>
      </div>
    );
  }
}
export default NoInventoryPopover;