组件之间通讯分为3种：

　　1. 父组件 -> 子组件

　　2. 子组件 -> 父组件

　　3. 兄弟组件

 

父组件传递数据给子组件

　　1. 父组件提供要传递的state数据

　　2. 给子组件标签添加属性，值为state中的数据

　　3. 子组件中通过props接收父组件中传递的数据

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  props
*/

// 父组件
class Parent extends React.Component {
  state = {
    lastName: '王'
  }

  render() {
    return (
      <div className="parent">
        父组件：
        <Child name={this.state.lastName} />
      </div>
    )
  }
}

// 子组件
const Child = (props) => {
  return (
    <div className="Child">
      <p>子组件，接收到父组件的数据：{props.name}</p>
    </div>
  )
}

// 1 传递数据
ReactDOM.render(<Parent />, document.getElementById('root'))

子组件传递数据给父组件

　　思路：利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数。

　　1. 父组件提供一个回调函数(用于接收数据)

　　2. 将该函数作为属性值，传递给子组件

　　3. 子组件通过props调用回调函数

　　4. 将子组件的数据作为参数传递给回调函数

//1. 导入react
import React from 'react';
import ReactDOM, { render } from 'react-dom';

/*
  props
*/

// 父组件
class Parent extends React.Component {
  state = {
    parentMsg:""
  }
  //提供回调函数，用来接收数据
  getChildMsg = date => {
    console.log('接收到子组件传递过来的数据：', date);

    this.setState({
      parentMsg:date
    })
  }

  render() {
    return (
      <div className="parent">
        父组件：{this.state.parentMsg}
        <Child getMsg={this.getChildMsg} />
      </div>
    )
  }
}

// 子组件
class Child extends React.Component {
  state = {
    msg:'刷抖音'
  }

  handleClick = () => {
    //子组件调用父组件中传递过来的回调函数
    this.props.getMsg(this.state.msg)
  }

  render() {
    return (
      <div className="Child">
        子组件：<button onClick={this.handleClick}>点我，给父组件传递数据</button>
      </div>
    )
  }
}
// 1 传递数据
ReactDOM.render(<Parent />, document.getElementById('root'))

 

兄弟组件

　　将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态

　　思想：状态提升

　　公共父组件职责：1. 提供共享状态2. 提供操作共享状态的方法

　　要通讯的子组件只需通过props接收状态或操作状态的方法

//1. 导入react
import React from 'react';
import ReactDOM, { render } from 'react-dom';

/*
  props
*/

// 父组件
class Counter extends React.Component {
  // 提供共享状态
  state = {
    count: 0
  }

  //提供修改状态的方法
  onIncrement = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return (
      <div>
        <Child1 count={this.state.count} />
        <Child2 onIncrement={this.onIncrement} />
      </div>
    )
  }
}

// 子组件
const Child1 = props => {
  return (
    <h1>计数器：{props.count}</h1>
  )
}

const Child2 = props => {
  return(
    <button onClick={() => props.onIncrement()}>+1</button>
  )
}

// 1 传递数据
ReactDOM.render(<Counter />, document.getElementById('root'))