React组件通讯的三种方式

一、父组件传递数据给子组件

import React from 'react';
import ReactDOM from 'react-dom';

// 父组件
class Parent extends React.Component {
  state= {
    num:100
  }
  render() {
    return (
      <div>
        父组件传递给子组件的数据：<Child num={this.state.num} />
      </div>      
    )
  }
}

// 子组件
const Child=(props)=> {
  return (
    <div>子组件接收到的数据：{props.num}</div>
  )
}

ReactDOM.render(<Parent />, document.getElementById('root'))

二、子组件传递数据给父组件

import React from 'react';
import ReactDOM from 'react-dom';

// 父组件
class Parent extends React.Component {
  state = {
    parentNum: ''
  }
  getChildNum = data => {
    this.setState({
      parentNum: data
    })
  }
  render() {
    return (
      <div>
        父组件：{this.state.parentNum}
        <Child getNum={this.getChildNum} />
      </div>
    )
  }
}

// 子组件
class Child extends React.Component {
  state = {
    num: 100
  }
  handleClick = () => {
    this.props.getNum(this.state.num)
  }
  render() {
    return (
      <div>子组件：<button onClick={this.handleClick}>点我传值</button></div>
    )
  }
}

ReactDOM.render(<Parent />, document.getElementById('root'))

三、兄弟组件通讯

将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态（状态提升）。公共父组件提供共享状态和操作共享状态的方法。

import React from 'react';
import ReactDOM from 'react-dom';

// 父组件
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 (
    <div>计数器：{props.count}</div>
  )
}

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

ReactDOM.render(<Counter />, document.getElementById('root'))