父子組件通信props(限定類(lèi)型),自定義事件

***組件自己的數(shù)據(jù):this.state={a:'test'} 設(shè)置this.setState({a:'b'});獲取this.state.a;

1:父親給孩子傳值,用到的是props我們?cè)诟附M件引用子組件時(shí),給一個(gè)自定義的屬性例如 <child con='666'></child>

這個(gè)時(shí)候在子組件中可以用this.props.con來(lái)得到這個(gè)傳遞過(guò)來(lái)的值。

2:孩子給父親傳值,用到的是自定義事件。首先還是在父組件引用子組件的標(biāo)簽名上<child move={this.move.bind(this)}></child> move是父組件上的一個(gè)方法。

子組件上我們用源生事件來(lái)觸發(fā)自定義事件例如onclick={this.props.move}.

3:限定父組件傳過(guò)來(lái)值的類(lèi)型,默認(rèn)值

限制類(lèi)型和是否必須傳值可以用prop-types這個(gè)組件,首先我們npm安裝依賴(lài)這個(gè)組件,然后在子組件中import propTypes from "prop-types";然后我們?cè)谧咏M件中這樣配置

child.propTypes={

? ?context:propTypes.string.isRequired;//string限制類(lèi)型,isRequired限定是否必須傳值。

}

設(shè)置默認(rèn)值

child.defaultProps={

context="text";

}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容