React 父调子 子调父 observer.js 非父子传值

https://www.cnblogs.com/universe-cosmo/p/10969351.html
https://www.cnblogs.com/jokehl/p/9998163.html

16.3.0之前的设置方法为
//子组件
var HelloMessage = React.createClass({
    childMethod: function(){
        alert("组件之间通信成功");
    },
    render: function() {
                  //子调父
        return <div> <h1>Hello {this.props.name}</h1>  
                  <button onClick={this.childMethod}>子组件</button></div>
    }
});

// 父组件
var ImDaddyComponent = React.createClass({
    getDS: function(){
        // 父调子
        this.refs.getSwordButton.childMethod();
    },
    render: function(){
        return (
                <div>
                    //子组件
                    <HelloMessage name="John" ref="getSwordButton" />
                    <button onClick={this.getDS}>父组件</button>
                </div>
        );
    }
});

ReactDOM.render(
        <ImDaddyComponent  />,
);

16.3.0之后(包括16.3.0 version)的设置方法为

import React, {Component} from 'react';
//父组件
export default class Parent extends Component {
    render() {
        return(
            <div>
                <Child onRef={this.onRef} />
                <button onClick={this.click} >click</button>
            </div>
        )
    }

    onRef = (ref) => {
        this.child = ref
    }
    //父调子
    click = (e) => {
        this.child.myName()
    }

}
//子组件
class Child extends Component {
    componentDidMount(){
        //子调父
        this.props.onRef(this)
    }

    myName = () => alert('xiaohesong')

    render() {
        return ('woqu')
    }
}

---

非父子传值
let eventList = {};
const $on = (eventName, cb) => {
  if (!eventList[eventName]) {
    eventList[eventName] = [];
  }
  eventList[eventName].push(cb);
};

const $emit = (eventName, params) => {
  if (eventList[eventName]) {
    let arr = eventList[eventName];
    arr.map(cb => {
      cb(params);
    });
  }
};

const $off = (eventName, cb) => {
  if (eventList[eventName]) {
    if (cb) {
      let index = eventList[eventName].indexOf(cb);
      eventList[eventName].splice(index, 1);
    } else {
      eventList[eventName].length = 0;
    }
  }
};

export default {
  $on,
  $emit,
  $off
};

---

One组件

render(){
    return (
        <div>
            <button onClick={this.handleTwo.bind(this)}>发送给Two组件</button>
        </div>
    )
}

handleTwo(){
    Observer.$emit("handle",this.state.oneVal);
}

Two组件

constructor(){
    super();
    this.state = {
        oneVal:""
    }
    Observer.$on("handle",(val)=>{
        this.setState({
            oneVal:val
        })
    })
}

render(){
    let {oneVal} = this.state;
    return (

　　　　　　接收到one组件的值为：{oneVal}

    )
}