组件通信02 -----兄弟组件通信

react 兄弟通信

案例：创建两个子组件Input 组件和List组件，Input组件是一个input框，List组件负责渲染，Input组件添加一个值在List组件进行渲染

方法：

1. 通过redux进行通信（就不多说了…）

2. 通过对相同的父组件作为媒介，实现兄弟之间通信

   App.js

import React from "react"
import Input from "./components/Input"
import List from "./components/List"
export default class App extends React.Component{
  state = {
    listDate: []
  }
  // 将这个方法传给Input组件，Input组件通过这个方法调用将数据传给父组件，父组进行处理后在将数据传给List组件，实现兄弟组件的数据通信。
  addList = (value) => {
    this.state.listDate.unshift(value)
    this.setState({
      listDate: this.state.listDate
    })
  }
  render(){
    return (
      <div>
        <Input addList={this.addList}/>
        <List listDate={this.state.listDate}/>
      </div>
    )
  }
}

Input.js

import React from "react"
export default class Input extends React.Component{
    // 通过父组件传递的方法将数据传递给父组件
    handleAdd = ()=> {
        const value = this.inputNode.value
        this.props.addList({
            value
        })
    }
    render(){
        return (
            <div>
                <input ref = {e => this.inputNode = e}/>
                <button onClick={this.handleAdd}>添加</button>  
            </div>
        )
    }
}

List.js

import React from "react"
export default class List extends React.Component{
    render(){
        return (
            <div>
                <ul>
                    {
                    // 通过this.props 取到父组件传递的数据进行数据渲染
                        this.props.listDate.map((item, index)=>{
                            return (
                                <li key={index}>{item.value}</li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}

3. 通过pubsub-js消息订阅与发布-----适用于任何组件通信

1). 安装pubsub-js

yarn add pubsub-js

2). App.js 根组件

import React from "react"
import Input from "./components/Input"
import List from "./components/List"
export default class App extends React.Component{
  render(){
    return (
      <div>
        <Input/>
        <List/>
      </div>
    )
  }
}

3). Input.js

import React from "react"
import Pubsub from "pubsub-js"
export default class Input extends React.Component{
    handleAdd = ()=> {
        const value = this.inputNode.value
        // 发布消息
        Pubsub.publish('lsitDate', {value})
    }
    render(){
        return (
            <div>
                <input ref = {e => this.inputNode = e}/>
                <button onClick={this.handleAdd}>添加</button>  
            </div>
        )
    }
}

4). List.js

import React from "react"
import Pubsub from "pubsub-js"
export default class List extends React.Component{
    state = {
        listDate: []
    }
    componentDidMount() {
        // 订阅消息
        // 有两个参数（msg，data）省略msg 写法（_, data）
        Pubsub.subscribe('lsitDate', (_, data)=>{
            this.state.listDate.unshift(data)
            this.setState({
                listDate: this.state.listDate
            })
        })
    }
    render(){
        return (
            <div>
                <ul>
                    {
                        this.state.listDate.map((item, index)=>{
                            return (
                                <li key={index}>{item.value}</li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}