本文最后更新于 128 天前，其中的信息可能已经有所发展或是发生改变。
react的组件通信
1、父组件传子组件
代码语言：javascript复制import React, {Component} from 'react'
class Father extends Component{
render() {
return (
<div>
<Child msg="我是父组件中的数据：father-data"/>
</div>
)
}
}
class Child extends Component{
constructor(props) {
super(props)
this.state = {
message: props.msg
}
}
render() {
return (
<div>
<div>父组件传过来的数据是：{this.state.message}</div>
</div>
)
}
}
export default Father父组件在调用的子组件上定义一个属性msg，属性的值就是需要传递的数据。在子组件中，通过props.msg获取数据。
2、子组件传父组件
代码语言：javascript复制import React, { Component } from 'react'
class Child extends Component {
constructor(props) {
super(props)
}
input = (e) => {
console.log(e.target.value);
if (e.keyCode == 13) {
this.props.send(e.target.value)
}
}
render() {
return (
<div>
<input type="text" placeholder='please input' onKeyUp={this.input} />
</div>
)
}
}
class Father extends Component {
state = {
inputVal: "123"
}
getData = (val) => {
this.setState({
inputVal: val
})
}
render() {
return (
<div>
<Child send={this.getData} />
子元素传过来的值：{this.state.inputVal}
</div>
)
}
}
export default Father子组件传父组件是通过在子组件中使用props调用父组件中定义的方法（函数）并将自己的数据传递过去。 如上所示，父组件在调用的子组件上定义了send方法用于获取子组件传过来的数据，子组件中调用父组件中的send方法将input的值传过去。 注意：若定义的函数不是箭头函数，则需要在调用的地方使用bind绑定当前this。如this.getdata.bind(this)
3、兄弟组件通信
代码语言：javascript复制import React, {Component} from 'react'
class A extends Component{
state = {
inputVal: "module A default value"
}
handleChange = (e) => {
this.setState ({
inputVal: e.target.value
})
}
sendData = () = {
const { sendFn } = this.props
sendFn(this.state.inputVal)
}
render() {
return (
<div>
<input type="text" value={this.state.inputVal} onChange={this.handleChange}/>
<button onClick={this.sendData}>send</button>
</div>
)
}
}
class B extends Component{
const { sendVal } = this.props
render() {
return (
<div>
<p>B组件接收到的值是：{sendVal}</p>
</div>
)
}
}
class Public extends Component{
state = {
inputVal: "module Public default value"
}
handleUpdate= (inputVal) => {
this.setState({
inputVal: inputVal
})
}
render() {
return (
<div>
<A sendFn={this.handleUpdate}></A>
<B sendValue={this.state.inputVal}></B>
</div>
)
}
}
export default Public兄弟组件传值（A传B）需要使用公共组件（Public）进行过渡，即A传Public、Public传B。 A组件通过监听input框输入的值，然后点击按钮，在按钮事件中会调用公共组件中的更新视图（handleUpdate）的方法，将文本框的值作为参数传进去，然后公共组件就获取到A组件的值，然后将公共组件的值传给B组件，B组件再去就接收就能获取到公共组件的值，这样，也就获取到A组件传过来的值。
