React学习08_组件间的传值与this的绑定

父子传值

1. 父组件在使用子组件时，给它的属性传入想给它的数据
2. 子组件通过 this.props.属性名 可以获取该数据

子向父传值

1. 父组件向子组件传入一个带参数的方法
2. 子组件通过向这个方法传入自己的数据，在父组件触发该方法，父组件通过 this.setState 来修改父组件的值并渲染从而实现子向父传值

bind(this,…args)

该方法主要是把当前实例绑定到方法目标方法中
如下面的代码:
父组件

import React, { Component } from 'react';
import News from './New'
import Phone from './phone'
export default class componentName extends Component {
    constructor(props){
        super(props)
        this.state={
            text:"我是默认值"
        }
    }
    dataFun=(text)=>{
        this.setState({
            text
        })
    }
    render() {
        return (
            <div> 
                <News fufun={this.dataFun}/>
            </div>
        );
    }
}

子组件

import React, { Component } from 'react';
import PubSub from 'pubsub-js'
export default class componentName extends Component {
    constructor(props) {
        super(props)
        this.state = {
            ziText: "我是子组件的数据"
        }
    }
    render() {
        return (
            <div>
                <button onClick={this.props.fufun.bind(this,this.state.ziText)}>点我进行数据的发送</button>
            </div>
        );
    }
}

1. 子组件的第一个参数this，表示将该方法的this指向自己(而不是父组件的this)
2. 第二个参数就是上传的值

兄弟间传值

1. npm i pubsub-js --save,该插件如同放置一个全局的map
2. 导包 import PubSub from 'pubsub-js’
   兄弟1 组件

pubsub(){
      PubSub.publish('evt',this.state.num)
  }
<button onClick={this.pubsub.bind(this)}>点我进行同级传值</button>

兄弟2组件
导包，然后就可以使用了

PubSub.subscribe("evt",(msg,data)=>{
    console.log("phone"+data)
})