這篇文章將為大家詳細(xì)講解有關(guān)react中子組件是什么意思,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
在react中,將某段代碼封裝成一個(gè)組件,而這個(gè)組件又在另一個(gè)組件中引入,那么引入該封裝的組件的文件叫做父組件,被引入的組件就叫做子組件。
有時(shí)候我們經(jīng)常分不清什么是父組件,什么又是子組件?,F(xiàn)在來(lái)簡(jiǎn)單說(shuō)下:我們將某段代碼封裝成一個(gè)組件,而這個(gè)組件又在另一個(gè)組件中引入,而引入該封裝的組件的文件叫做父組件,被引入的組件叫做子組件。
react中直接調(diào)用子組件的方法(非props方式)
我們都知道在 react中,若要在父組件調(diào)用子組件的方法,通常我們會(huì)采用在父組件定義一個(gè)方法,作為props轉(zhuǎn)給子組件,然后執(zhí)行該方法,可以獲取到子組件傳回的參數(shù)以得到我們的目的。
顯而易見(jiàn),這個(gè)執(zhí)行是需要去主動(dòng)觸發(fā)的。
那有沒(méi)有一種方式,方法在子組件定義好,可以直接在父組件去調(diào)用呢?
答案是必然的。
上代碼
import React, {Component} from "react"; import { Button } from "antd"; //父組件 export default class Parent extends Component { render() { return( <div> <p>這是父組件</p> <Child triggerRef={this.bindRef} /> <Button type="primary" onClick={this.btnClick} >click</Button> </div> ) } bindRef = ref => { this.child = ref } btnClick = () => { this.child.getValuefromChild() } } //子組件 class Child extends Component { componentDidMount(){ this.props.triggerRef(this) } //這是子組件的方法 getValuefromChild = () => console.log("this is child value.") render() { return <div>這是子組件</div> } }
關(guān)于react中子組件是什么意思就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
分享標(biāo)題:react中子組件是什么意思-創(chuàng)新互聯(lián)
網(wǎng)址分享:http://www.rwnh.cn/article0/djheoo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、Google、網(wǎng)站設(shè)計(jì)公司、外貿(mào)建站、網(wǎng)站營(yíng)銷(xiāo)、用戶體驗(yàn)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容