React 组件传值简单易懂版

React 组件传值

1.兄弟传值(其实就是子传父，父在传给别的子组件)

1.兄弟1：son1
通过props给父组件传值

giveProps(msg){
	this.props.msg("给兄弟的值")
	//这里的msg就是传值的变量
}
<div onClick={this.giveProps.bind(this)}></div>

2.父组件：parent
接收son1传来的组件并且给son2传递

 getDatas(msg){
        this.setState({
            data: msg
        });
    }
    
  render(){
       return (
           <div>
           //这里的msg是子组件传给父组件的变量名
               <son1 msg={this.getDatas.bind(this)}></son2>
           //这里data是父给子传的变量名
               <son2 data={this.state.data}></son2>
           </div>
       );
   }

3.兄弟2：son2
可以拿到父组件传来的son1的值

  render(){
       return (
           <div>
          //这里data变量名展示父组件传给子组件的值
               {this.props.data}
           </div>
       );
   }

会了兄弟传值，父子传值也就会了。