react 組件傳值的三種方法
更新時(shí)間：2019年06月03日 10:31:46 作者：阿西瓜
這篇文章主要介紹了react 組件傳值的三種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
整理 react 組件傳值 三種方式
父組件向子組件傳值（通過(guò)props傳值）
子組件：
class Children extends Component{
constructor(props){
super(props);
}
render(){
return(
<div>這是：{this.props.name}</div> // 這是 父向子
)
}
}
父組件:
class App extends React.Component{
render(){
return(
<div>
<Children name="父向子"/>
</div>
)
}
}
父組件向子組件傳值（回調(diào)函數(shù)）
子組件
class Children extends Component{
constructor(props){
super(props);
}
handerClick(){
this.props.changeColor('skyblue') // 執(zhí)行父組件的changeColor 并傳參 必須和父組件中的函數(shù)一模一樣
}
render(){
return(
<div>
<div>父組件的背景色{this.props.bgcolor}</div> // 子組件接收父組件傳過(guò)來(lái)的值 bgcolor
<button onClick={(e)=>{this.handerClick(e)}}>改變父組件背景</button> // 子組件執(zhí)行函數(shù)
</div>
)
}
}
父組件
class Father extends Component{
constructor(props){
super(props)
this.state = {
bgcolor:'pink'
}
}
bgChange(color){
this.setState({
bgcolor:color
})
}
render(props){
<div style={{background:this.state.bgcolor}}>
// 給子組件傳遞的值 color
<Children bgcolor={this.state.bgcolor} changeColor={(color)=>{this.bgChange(color)}} />
// changeColor 子組件的參數(shù)=color 當(dāng)做形參
</div>
}
}
兄弟組件傳值（子傳給父，父再傳給另一個(gè)子）
子組件1
class Children1 extends Component{
constructor(props){
super(props);
}
handerClick(){
this.props.changeChild2Color('skyblue')
// 改變兄弟組件的顏色 把changeChild2Color的參數(shù)傳給父
}
render(){
return(
<div>
<div>children1</div>
<button onClick={(e)=>{this.handerClick(e)}}>改變children2背景</button>
</div>
)
}
}
子組件2
class Children2 extends Component{
constructor(props){
super(props);
}
render(){
return(
<div style={{background:this.props.bgcolor}}>
// 從父元素獲取自己的背景色
<div>children2 背景色 {this.props.bgcolor}</div>
// children2 背景色 skyblue
</div>
)
}
}
父組件
class Father extends Component{
constructor(props){
super(props)
this.state = {
child2bgcolor:'pink'
}
}
onchild2bgChange(color){
this.setState({
child2bgcolor:color
})
}
render(props){
<div>
<Children1 changeChild2Color={(color)=>{this.onchild2bgChange(color)}} />
<Children2 bgcolor={this.state.child2bgcolor} />
</div>
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
react hooks實(shí)現(xiàn)防抖節(jié)流的方法小結(jié)
這篇文章主要介紹了react hooks實(shí)現(xiàn)防抖節(jié)流的幾種方法,文中通過(guò)代碼示例給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-04-04
在React頁(yè)面重新加載時(shí)保留數(shù)據(jù)的實(shí)現(xiàn)方法總結(jié)
在React頁(yè)面重新加載時(shí)保留數(shù)據(jù),可以通過(guò)多種方法來(lái)實(shí)現(xiàn),常見(jiàn)的方法包括使用瀏覽器的本地存儲(chǔ)（Local Storage 或 Session Storage）、URL參數(shù)、以及服務(wù)器端存儲(chǔ)等,本文給大家總結(jié)了一些具體實(shí)現(xiàn)方法,需要的朋友可以參考下2024-06-06
react的滑動(dòng)圖片驗(yàn)證碼組件的示例代碼
這篇文章主要介紹了react的滑動(dòng)圖片驗(yàn)證碼組件的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要介紹了詳解react組件通訊方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
React模仿網(wǎng)易云音樂(lè)實(shí)現(xiàn)一個(gè)音樂(lè)項(xiàng)目詳解流程
這篇文章主要介紹了React模仿網(wǎng)易云音樂(lè)實(shí)現(xiàn)一個(gè)音樂(lè)項(xiàng)目的詳細(xì)流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
React?Native性能優(yōu)化指南及問(wèn)題小結(jié)
本文將介紹在React?Native開(kāi)發(fā)中常見(jiàn)的性能優(yōu)化問(wèn)題和解決方案,包括ScrollView內(nèi)無(wú)法滑動(dòng)、熱更新導(dǎo)致的文件引用問(wèn)題、高度獲取、強(qiáng)制橫屏UI適配、低版本RN適配iOS14、緩存清理、navigation參數(shù)取值等,感興趣的朋友一起看看吧2024-01-01
詳解使用create-react-app快速構(gòu)建React開(kāi)發(fā)環(huán)境
這篇文章主要介紹了詳解使用create-react-app快速構(gòu)建React開(kāi)發(fā)環(huán)境,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
這篇文章主要介紹了從react?hooks閉包陷阱切入淺談react?hooks，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實(shí)現(xiàn)父組件向子組件通信，文章通過(guò)圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
這篇文章主要介紹了ReactRouter的實(shí)現(xiàn),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01