React组件传值之--逆向传值-同胞传值

逆向传值--使用props接收一个父组件函数

子组件把数据给父组件

利用回调函数 父组件提供函数，子组件调用并且把数据当做函数的参数传入

子组件

import React, { Component } from 'react'
​
export default class zi extends Component {
  render() {
    return (
      <div>
          zizizizzizi
          {/* 1.逆向传值必须通过事件来触发 一个父组件传递过来的函数*/}
          <button onClick={this.props.demofun}>点我进行逆向传值</button>
      </div>
    )
  }
}
​

父组件

import React, { Component } from 'react'
import Zi from "./zi.jsx"
export default class fu extends Component {
    fufun=()=>{
        
    }
  render() {
    return (
      <div>
          fuffufufufuf
          {/* 2.父组件给子组件传递一个函数 */}
          <Zi demofun={this.fufun}></Zi>
        
      </div>
    )
  }
}
​

子组件

import React, { Component } from 'react'
​
export default class zi extends Component {
  render() {
    return (
      <div>
          zizizizzizi
          {/* 1.逆向传值必须通过事件来触发 一个父组件传递过来的函数*/}
          {/* 3.给函数进行实参的传递 */}
          <button onClick={this.props.demofun.bind(this,"我是子组件的数据")}>点我进行逆向传值</button>
      </div>
    )
  }
}
​

父组件

import React, { Component } from 'react'
import Zi from "./zi.jsx"
export default class fu extends Component {
    // 4.父组件设置形参接收子组件绑定的实参
    fufun=(text)=>{
            console.log("我是父组件的函数",text)
    }
  render() {
    return (
      <div>
          fuffufufufuf
          {/* 2.父组件给子组件传递一个函数 */}
          <Zi demofun={this.fufun}></Zi>
        
      </div>
    )
  }
}

同胞传值

Pubsub-js

react中默认是不能进行同胞传值的 如果我们要进行 那么必须依赖 pubsub-js（是-js 千万不要记错了）库来实现

1.npm install --save pubsub-js

2.抛出 在需要传递的组件中使用 Pubsub.publish(“自定义事件名”,"数据") publish创建自定义事件

import React, { Component } from 'react'
// 1.引用pubsub-js
import Pubsub from "pubsub-js"
export default class zia extends Component {
    fun=()=>{
        // 2.publish抛出自定义事件
        Pubsub.publish("zia","我是zia的数据么么哒！！！！！")
    }
  render() {
    return (
            <div>
        aaaaaaaa
        <button onClick={this.fun}>点我吧数据给B</button>
      </div>
​
  }
}
​

2.接收 据的组件中使用Pubsub.subscribe("你监听的事件",()=>{})subscribe 监听自定义事件

import React, { Component } from 'react'
// 3.引用pubsub
import Pubsub from "pubsub-js"
export default class zib extends Component {
    constructor(){
        super()
        console.log("1.react初始化数据")
    }
    componentWillMount(){
        console.log("2.在渲染之前调用")
    }
    componentDidMount() { 
    //    接收   监听同胞传值的自定义事件
        // 回调函数的第一个形参是你监听的自定义事件的名字
        // 回调函数的第二个形参就是自定义事件上绑定的数据
    Pubsub.subscribe("zia",(a,b)=>{
        console.log(a)
        console.log(b)
    })
​
     }
  render() {
      console.log("3开始渲染")
    return (
      <div>zib</div>
    )
  }
}

​

状态提升--中间人模式

React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件

上.在父组件上改变这个状态然后通过props分发给子组件.