React 组件通信

父子组通信

父传子

• 1.在调用子组件的时候，定义一个属性
• 2.子组件里面this.props.属性

// F
<Test title="页面标题"></Test>
//C
<p>{this.props.title}</p>

//F
  myrun = ()=>{
    alert("我是父组件的方法")
  }
<Test title="页面标题" run={this.myrun}></Test>
//C
<button onClick={this.props.myrun}>点击</button>

// F 将父组件全部给子组件 this
  test = () => {
    alert("test")
  }
<Test title="页面标题" run={this.myrun} all={this}></Test>
//C 子组件调用父组件的test方法
<button onClick={this.props.all.test}>点击</button>

也可以通过props子组件传父组件

//F
  getChildMsg = (result)=>{
    this.setState({
      msg:result  // result  子组件信息
    })
    alert(result)
  }
  
  //C
<button onClick={this.props.all.getChildMsg.bind(this,"子组件信息")}>点击</button>

说明：父传子，不仅可以给子组件传值，还可以给子组件传递方法，甚至可以把整个父组件传递给子组件，也可以让子组件给父组件传值

子传父

父组件主动获取子组件的数据

• 1.父组件调用子组件的时候指定ref的值
• 2.父组件通过this.refs.header 获取子组件整个实例（组件加载完）

<Header ref="header"  />
this.refs.header

props

// 父
		  fatherFun = (data)=>{
    		this.setState({
      			number:data // 12345
   			 })
 		 	}
        	{this.state.number}
        	<Children onChild={this.fatherFun}></Children>
// 子
	 handleChild = ()=>{
        this.props.onChild(12345)
    }
    
  render() {
    return (
      <div>
        <button onClick={this.handleChild}>子组件按钮</button>
      </div>
    )
  }

实际开发中，有时候组件之间数据通讯复杂，会用全局变量和redux等等;全局变量就不说了，之后有时间写一篇关于redux的

如有问题，望斧正，也欢迎交流，共同脱坑