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的

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