React 父子組件通信的實(shí)現(xiàn)方法
通訊是單向的，數(shù)據(jù)必須是由一方傳到另一方。
1.父組件與子組件間的通信。
在 React 中，父組件可以向子組件通過(guò)傳 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:'父類(lèi)的消息',
name:'John',
age:99
}
}
callback=(msg,name,age)=>{
// setState方法,修改msg的值,值是由child里面?zhèn)鬟^(guò)來(lái)的
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里面有三個(gè)屬性，分別是msg，name和age，在子組件child中，如果想拿到父組件里面的屬性，就需要通過(guò)props傳遞。
在 <Child></Child> 標(biāo)簽里面添加
name={this.state.name} age={this.state.age}
寫(xiě)成
<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:"來(lái)自子類(lèi)的消息"
}
}
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;
在子組件中,通過(guò) {this.props.name} {this.props.age}就能拿到父組件里面的數(shù)據(jù)。
呈現(xiàn)在頁(yè)面上的就是這個(gè)樣子。
其中 John,99均來(lái)自于父組件App.js
2.子組件向父組件通信
子組件向父組件通訊，同樣也需要父組件向子組件傳遞 props 進(jìn)行通訊，只是父組件傳遞的，是作用域?yàn)楦附M件自身的函數(shù)，子組件調(diào)用該函數(shù)，將子組件想要傳遞的信息，作為參數(shù)，傳遞到父組件的作用域中。
上面例子中，在子組件Child中綁定了onClick事件。 調(diào)用this.change方法。
注意change函數(shù)采用了箭頭函數(shù)的寫(xiě)法 change=()=>{}，目的是為了改變this的指向。使得在函數(shù)單獨(dú)調(diào)用的時(shí)候，函數(shù)內(nèi)部的this依然指向child組件
如果不使用箭頭函數(shù)，而是采用普通的寫(xiě)法
change(){
}
則需要在 constructor中綁定this,
this.change=this.change.bind(this)
或者在onClick方法中綁定this,
onClick={this.change=this.change.bind(this)}
在change方法中，通過(guò)props發(fā)送出去一個(gè)方法，比如說(shuō)叫callback方法，父組件中去接收這個(gè)方法，callback={this.callback}，然后在自身的callback函數(shù)中進(jìn)行一些列操作。
本例中，函數(shù)callback中就是通過(guò)調(diào)用 setState方法來(lái)改變值。
點(diǎn)擊按鈕后頁(yè)面顯示:
可以看到，我們既實(shí)現(xiàn)了通過(guò)props將父組件里面的數(shù)據(jù)傳遞給子組件的效果，也實(shí)現(xiàn)了通過(guò)子組件按鈕點(diǎn)擊事件，將子組件里面的數(shù)據(jù)發(fā)送給父組件
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
react項(xiàng)目中使用react-dnd實(shí)現(xiàn)列表的拖拽排序功能
這篇文章主要介紹了react項(xiàng)目中使用react-dnd實(shí)現(xiàn)列表的拖拽排序,本文結(jié)合實(shí)例代碼講解react-dnd是如何實(shí)現(xiàn)，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
antd中form表單的wrapperCol和labelCol問(wèn)題詳解
最近學(xué)習(xí)中遇到了些問(wèn)題,所以給大家總結(jié),下面這篇文章主要給大家介紹了關(guān)于antd中form表單的wrapperCol和labelCol問(wèn)題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
React Native可復(fù)用 UI分離布局組件和狀態(tài)組件技巧
這篇文章主要為大家介紹了React Native可復(fù)用 UI分離布局組件和狀態(tài)組件使用技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了react 生命周期,結(jié)合實(shí)例形式分析了react 生命周期基本原理、操作步驟與注意事項(xiàng),需要的朋友可以參考下2020-05-05
在React中使用Antd上傳并讀取Excel文件的詳細(xì)步驟
在React中使用Antd組件庫(kù)來(lái)上傳并讀取Excel文件,可以結(jié)合antd的Upload組件和xlsx庫(kù)來(lái)實(shí)現(xiàn),以下是一個(gè)詳細(xì)的步驟和示例代碼,展示如何在React應(yīng)用中實(shí)現(xiàn)這一功能,感興趣的小伙伴跟著小編一起來(lái)看看吧2025-01-01
React利用scheduler思想實(shí)現(xiàn)任務(wù)的打斷與恢復(fù)
這篇文章主要為大家詳細(xì)介紹了React如何利用scheduler思想實(shí)現(xiàn)任務(wù)的打斷與恢復(fù),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2024-03-03
這篇文章主要給帶大家搞清楚react hooks的類(lèi)型聲明，如果有同學(xué)還不清楚react hooks的類(lèi)型聲明，來(lái)看本文就對(duì)了，文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
React Native (簡(jiǎn)稱(chēng)RN)是Facebook于2015年4月開(kāi)源的跨平臺(tái)移動(dòng)應(yīng)用開(kāi)發(fā)框架，是Facebook早先開(kāi)源的JS框架 React 在原生移動(dòng)應(yīng)用平臺(tái)的衍生產(chǎn)物，支持iOS和安卓?jī)纱笃脚_(tái)。本文將介紹React Native與IOS端之間的交互。2021-06-06
React組件性能優(yōu)化可以減少渲染真實(shí)DOM的頻率,以及減少VD比對(duì)的頻率,本文為大家整理了一些有效的React組件優(yōu)化方法,需要的小伙伴可以參考下2023-12-12
本文將探討 React 中 CSS 模塊沖突的常見(jiàn)原因,并提供解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03