react-通信-非父子通信-中间人模式

非父子组件通信方式

(1)状态提升(中间人模式)

React中的状态提升概括来说，就是将多个组件需要共享的状态提升到它们最近的父组件上在父组件上，改变这个状态然后通过props分发给子组件.

/*
 * @Author: Spring
 * @LastEditors: Aidam_Bo
 * @LastEditTime: 2023-01-02 16:19:28
 */
import React, { Component } from 'react';
import axios from 'axios';
import "./css/bro.css"
//父组件
export default class Brother extends Component {
    state={
        filmList:[],
        detail:""
    }
    constructor(){
        super();
        //模拟数据
        axios.get(`/test.json`).then(res => {
            console.log(res.data.data.films);
            this.setState({
                filmList:res.data.data.films
            })
        })
    }
  render() {
    return (
      <div>
            {
                this.state.filmList.map(item =>
                    <div>
                        {/* {...item}：展开赋值 */}
                        <FilmItem key={item.filmId} {...item} eventClick={(name,synopsis)=>{
                            console.log("父组件接收",name,synopsis);
                            this.setState({
                                detail:synopsis
                            })
                        }}></FilmItem>
                        <FilmDetail key={item.filmId} detail={this.state.detail}></FilmDetail>
                    </div>
                    )
            }
      </div>
    )
  }
}

//子-受控组件
class FilmItem extends Component{
    render(){
        let {name,poster,synopsis} =this.props;//解构赋值
        return <div className='FilmItem' onClick={()=>{
            /* console.log("调用",name,synopsis); */
            this.props.eventClick(name,synopsis);
        }}>
           <img src={poster} alt={name}/>
           <h2>{name}</h2>
        </div>
    }
}

//子-受控组件
class FilmDetail extends Component{
    render(){
        let {detail} =this.props;//解构赋值
        return <div className='FilmDetail'>
           <h3>{detail}</h3>
        </div>
    }
}