react.js 父子組件數(shù)據(jù)綁定實(shí)時(shí)通訊的示例代碼
更新時(shí)間：2017年09月25日 11:44:53 作者：八bug哥哥
本篇文章主要介紹了react.js 父子組件數(shù)據(jù)綁定實(shí)時(shí)通訊的示例代碼，
react.js我自己還在摸索學(xué)習(xí)中，碰到父子組件數(shù)據(jù)綁定實(shí)時(shí)通訊的問題，研究了一下，分享給大家，也給自己留個(gè)筆記：
import React,{Component} from 'react'
import ReactDOM from 'react-dom'
class ChildCounter extends Component{
render(){
return(
<div style={{border:'1px solid red'}}>
{this.props.count}
</div>
)
}
}
/*
* 大家默認(rèn)規(guī)定的一些步驟，方便大家看
* 1.默認(rèn)值
* 2.初始化狀態(tài)
* 3.鉤子函數(shù)
* 4.方法函數(shù)
* */
class Counter extends Component{
//默認(rèn)屬性對(duì)象
static defaultProps={
number:5
}
constructor(props){
super(props);
//獲取我的初始狀態(tài)
this.state={
number:props.number
}
}
//鉤子函數(shù)
componentWillMount(){
console.log('組件將要掛載')
}
componentDidMount(){
console.log("組件掛載完成")
}
handleClick=()=>{
//this.setState方法是異步的，一個(gè)函數(shù)里面只能調(diào)用一次this.setState方法
//調(diào)用多次會(huì)合并，只執(zhí)行一次
this.setState((prev,next)=>({
//上一次的狀態(tài)prev
number:prev.number+1
}),()=>{
console.log("回調(diào)函數(shù)執(zhí)行")
})
// this.setState({index:this.state.index+1})
}
render(){
//調(diào)用子組件ChildCounter，把當(dāng)前狀態(tài)值傳過去
return(
<div>
<p>{this.state.number}</p>
<button onClick={this.handleClick}>+</button>
<ChildCounter count={this.state.number}></ChildCounter>
</div>
)
}
}
//渲染到頁面
ReactDOM.render(<Counter></Counter>,document.querySelector("#root"))
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
React報(bào)錯(cuò)信息之Expected?an?assignment?or?function?call?and?
這篇文章主要介紹了React報(bào)錯(cuò)之Expected?an?assignment?or?function?call?and?instead?saw?an?expression,下面有兩個(gè)示例來展示錯(cuò)誤是如何產(chǎn)生的，需要的朋友可以參考下2022-08-08
一文詳解ReactNative狀態(tài)管理rematch使用
這篇文章主要為大家介紹了ReactNative狀態(tài)管理rematch使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
React 提供了 refrefref 屬性，讓我們可以引用組件的實(shí)例或者原生 DOM 元素,使用 refrefref，可以在父組件中調(diào)用子組件暴露出來的方法，或者調(diào)用原生 element 的 API,這篇文章主要介紹了React中的ref屬性的使用,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了React?如何向url中添加參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
在React中,編寫樣式主要有以下幾種方式,內(nèi)聯(lián)樣式,外部樣式表,CSS Modules,Styled Components,Emotion和Radium這六種樣式,下面我將針對(duì)上面提到的6種方式給出詳細(xì)的代碼示例,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了react 組件傳值的三種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
本篇文章主要介紹了react-native fetch的具體使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要為大家介紹了React?模式之純組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Zustand是一個(gè)為React和瀏覽器環(huán)境設(shè)計(jì)的輕量級(jí)狀態(tài)管理庫,由Vercel開發(fā),它特點(diǎn)包括輕量級(jí)、易用性、靈活性、可組合性和性能優(yōu)化,支持多種狀態(tài)管理模式和中間件,適合中小型項(xiàng)目,Zustand還支持TypeScript,提供類型安全的支持2024-09-09
dva是一個(gè)基于redux和redux-saga的數(shù)據(jù)流方案，然后為了簡(jiǎn)化開發(fā)體驗(yàn)，dva額外內(nèi)置了react-router,fetch，可以激烈為一個(gè)輕量級(jí)的應(yīng)用框架，這篇文章主要介紹了react dva實(shí)現(xiàn),需要的朋友可以參考下2021-11-11