React兄弟组件间传参

效果

点击子组件1的按钮然后将子组件1的name值传递给子组件2并在页面展示：

父组件

子组件1

子组件2

描述：

1. 兄弟组件传参需要通过共同的父组件保存数据状态
2. 父组件准备一个回调函数给子组件1，然后子组件1调用时将数据传给父组件并修改数据
3. 父组件将修改后的数据传递给子组件2，子组件2接收并通过this.props.name进行展示

完整代码

import React from 'react'

class Parent extends React.Component {
    state = {
        name:''

    }
    handlerClick = (data) => {
        this.setState({
            name:data
        })
    }
    render(){
      return (
          <div>
              <Child1 onIncrement={this.handlerClick}></Child1>
              <Child2 name = {this.state.name}></Child2>
          </div>

      )  
    }
}


class Child1 extends React.Component {
    state = {
        name:'Mika'
    }
    
    toHandlerClick = () => {
        this.props.onIncrement(this.state.name)
    }

    render(){
        return (

            <div><button onClick={this.toHandlerClick}>点击显示名字</button></div>
        )
    }
}

class Child2 extends React.Component {
    state = {
        name:''
    }
    
    render(){
        return (
            <div>学生名：{this.props.name}</div>
        )
    }

}

export default Parent