父组件向子组件传值

父组件向一级子组件传递值，可以给子组件通过props传递。自上而下进行传递。

import React from 'react';
//定义一个父组件
class Parent extends React.Component{
    render(){
      return(
        <div>
          <h1></h1>
          <Son info={我是父组件}></Son>
      </div>
    )
  }
}
//定义一个子组件
class Son extends React.Component{
    render(){
      return(
        <div>
          <h1>{this.props.info}</h1>
      </div>
    )
  }
}

子组件向父组件传值

子组件向父组件通讯，同样需要父组件向子组件传递props，只是父组件传递的不是值，而是传递一个函数，这个函数的作用域为父组件。子组件调用这个函数，将子组件要传递的信息，作为参数，传递到父组件作用域中。父组件作用域中的该函数执行时，就能调用到这个参数了。

class Parent extends Component {
    state = {
        data: 'data'
    }
    getChildMessage (newData) {
        this.setState({
            data: newData
        })
    }
    render() {
        return <div>
            <Child fn={(data) => this.getChildMessage(data)} />
     //或者 <Child fn={this.getChildMessage} /> 
        </div>
    }
}
class Child extends Component {
    componentDidMount() {
        setTimeout(() => {
            this.props. getChildMessage('child-data');  // 调用父组件传来的函数，将数据作为参数传过去
        }, 1000);
    }    
    render() {...}
}

兄弟组件之间传值

对于没有直接关联的两个组件，ChildA和ChildB之间，他们之间唯一的联系就是，它们有相同的父组件Parent。
如果我们想由A向B通讯，可以先从A向Parent通讯，再由Parent向B通讯。

class Parent extends Component {
    state = {
        data: 'data'
    }
    getChildMessage (newData) {
        this.setState({
            data: newData
        })
    }
    render() {
        return <div>
            <ChildA fn={(data) => this.getChildMessage(data)} />  {/* 父组件从子组件A获取到值 */}
            <ChildB data={this.state.data} />   {/* Parent向子组件B传值 */}
        </div>;
    }
}
class ChildA extends Component {
    componentDidMount() {
        setTimeout(() => {
            this.props.getChildMessage('child-data');  // 向Parent传值
        }, 1000);
    }
    render() {...}
}
  class ChildB extends Component {
    render() {
        return <p>{this.props.data}</p>;  {/* 从Parent传来的值 */}
    }
}