通訊是單向的侦铜，數(shù)據(jù)必須是由一方傳到另一方院塞。
1.父組件與子組件間的通信顿肺。
在 React 中戏溺，父組件可以向子組件通過傳 props 的方式，向子組件進(jìn)行通訊屠尊。
父組件 App.js
import React, { Component } from 'react';
import './App.css';
import Child from './child'
class App extends Component {
constructor(props){
super(props);
this.state={
msg:'父類的消息',
name:'John',
age:99
}
}
callback=(msg,name,age)=>{
// setState方法,修改msg的值,值是由child里面?zhèn)鬟^來的
this.setState({msg});
this.setState({name});
this.setState({age});
}
render() {
return (
<div className="App">
<p> Message: {this.state.msg}</p>
<Child callback={this.callback} age={this.state.age} name={this.state.name}></Child>
</div>
);
}
}
export default App;
父組件中旷祸，state里面有三個屬性，分別是msg讼昆，name和age托享，在子組件child中，如果想拿到父組件里面的屬性，就需要通過props傳遞闰围。
在 <Child></Child> 標(biāo)簽里面添加
name={this.state.name} age={this.state.age}
寫成
<Child name={this.state.name} age={this.state.age}></Child>
name和age分別是你要傳遞的屬性赃绊。
子組件 ? Child
import React from "react";
class Child extends React.Component{
constructor(props){
super(props);
this.state={
name:'Andy',
age:31,
msg:"來自子類的消息"
}
}
change=()=>{
this.props.callback(this.state.msg,this.state.name,this.state.age);
}
render(){
return(
<div>
<div>{this.props.name}</div>
<div>{this.props.age}</div>
<button onClick={this.change}>點(diǎn)擊</button>
</div>
)
}
}
export default Child;
在子組件中,通過 {this.props.name} ?{this.props.age}就能拿到父組件里面的數(shù)據(jù)。
呈現(xiàn)在頁面上的就是這個樣子羡榴。
其中 John,99均來自于父組件App.js
2.子組件向父組件通信
子組件向父組件通訊碧查，同樣也需要父組件向子組件傳遞 props 進(jìn)行通訊，只是父組件傳遞的校仑，是作用域?yàn)楦附M件自身的函數(shù)忠售，子組件調(diào)用該函數(shù)，將子組件想要傳遞的信息迄沫，作為參數(shù)稻扬，傳遞到父組件的作用域中。
上面例子中邢滑，在子組件Child中綁定了onClick事件腐螟。 調(diào)用this.change方法。
注意change函數(shù)采用了箭頭函數(shù)的寫法 change=()=>{}困后，目的是為了改變this的指向翎朱。使得在函數(shù)單獨(dú)調(diào)用的時候歉提，函數(shù)內(nèi)部的this依然指向child組件
如果不使用箭頭函數(shù)止喷，而是采用普通的寫法
change(){
}
則需要在 constructor中綁定this,
this.change=this.change.bind(this)或者在onClick方法中綁定this,
onClick={this.change=this.change.bind(this)}
在change方法中娜汁，通過props發(fā)送出去一個方法淤击，比如說叫callback方法逢艘，父組件中去接收這個方法估盘，callback={this.callback}喷市，然后在自身的callback函數(shù)中進(jìn)行一些列操作跌宛。
本例中酗宋，函數(shù)callback中就是通過調(diào)用 setState方法來改變值。
點(diǎn)擊按鈕后頁面顯示:
可以看到疆拘，我們既實(shí)現(xiàn)了通過props將父組件里面的數(shù)據(jù)傳遞給子組件的效果蜕猫，也實(shí)現(xiàn)了通過子組件按鈕點(diǎn)擊事件，將子組件里面的數(shù)據(jù)發(fā)送給父組件
