react 非父子组件通讯(发布订阅模式)

父组件里包含两个子组件,子组件一将值传入子组件二显示;

 

// 非父子组件通讯   发布订阅模式
import React, { Component } from 'react'
import axios from 'axios'
import './css/movie.css'

// 定义bus
var bus = {
  list: [],
  // 订阅
  subscribe(callback) {
    this.list.push(callback)
  },

  // 发布
  publish(text) {
    // 遍历所有的列表将回调函数执行
    this.list.forEach(callback => {
      callback && callback(text)
    })
  }
}

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      cinemaList: [],
    }
  }
  componentDidMount() {
    this.init()
  }
  init() {
    // 请求数据
    axios.get('/text.json').then(res => {
      this.setState({
        cinemaList: res.data.data.films
      })
    })
  }
  render() {
    return (
      <div>
        {
          this.state.cinemaList.map(item =>
            <FilmItem key={item.filmId} {...item}></FilmItem>
          )
        }
        <FilmDetail></FilmDetail>
      </div>
    )
  }
}

// 子组件1
class FilmItem extends Component {
  render() {
    let { poster, name, grade, actors, nation, runtime, synopsis } = this.props
    return <div className='Box' onClick={() => {
      // this.props.onEvent(synopsis)
      // 发布者
      bus.publish(synopsis)
    }}>
      <div className='movieBox'>
        <div className='movieBox_left'>
          <div className='imgBox'>
            <img className='img' src={poster} alt={name}></img>
          </div>
          <div className='rightBox'>
            <div className='list1'>{name}</div>
            <div className='list2'>观众评分: {grade}</div>
            <div className='list3'>主演: {actors[0].name}</div>
            <div className='list4'>{nation} | {runtime}分钟</div>
          </div>
        </div>
        {/* <div className='movieBox_right'>
          111
        </div> */}
      </div>
    </div>
  }
}

// 子组件2
class FilmDetail extends Component {
  constructor() {
    super()
    this.state = {
      info: ''
    }
    // 订阅
    bus.subscribe((info) => {
      console.log('我在右边黄色的组件中定义', info);
      this.setState({
        info: info
      })
    })
  }
  render() {
    return <div className='filmdetail'>
      {this.state.info}
    </div>
  }
}