react 跨模块非父子组件通信 ：event bus信

?

1 2	import { EventEmitter } from 'events' export default new EventEmitter()

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

import React from 'react'; import Bus from 'utils/eventBus'   export default function Comp1 (props) {     const data = {     msg: 'msg comes from comp1'   }     const handleClick = () => {     console.log('click comp1')     Bus.emit('is_from_comp1', data)   }     return (     <h2 className="Comp1">       组件1       <button onClick={handleClick}>点击</button>     </h2>   ) }

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

import React, { useEffect, useState } from 'react'; import Bus from 'utils/eventBus'   export default function Comp2 (props) {   const [msg, setMsg] = useState('comp2 default msg')     useEffect(() => {     Bus.addListener('is_from_comp1', data => {       console.log(2, data);       setMsg(data.msg)     })   }, [])     return (     <h2 className="Comp2">       组件2  <span>{msg}</span>     </h2>   ) }