淺談React 一父子傳值(二,舊版)

hello 大家週末好,又是一個無聊的週末沒有什麼比待在家裏寫代碼和睡覺了 ,哈哈。上一篇文章中咱們說到了React父子組件之間的相互通信,這篇文章吶給大家補充一點知識點。一個項目中是一個團隊來一起開發的一人負責一個模塊,咱們怎麼使自己寫的模塊代碼更加牢固更加成熟呢?接下就是咱們今天的主題!!!

一:給參數設定類型(string , number , function 等等)

先引入ProTypes這個模塊(哪個頁面需要給參數設定類型就在哪個頁面引入)
在這裏插入圖片描述

使用方法:
在這裏插入圖片描述
圖中的Content是我頁面定義的class ,userid父頁面傳來的參數key,ProTypes.string的意思就是規定userid這個參數只能是字符串類型,isRequired的意思是這個參數是必傳的參數。

父頁面傳參:
在這裏插入圖片描述
剛剛咱們在Content裏面設置了userid這個參數是string類型也是必傳項咱們現在看看頁面的效果
在這裏插入圖片描述
正常輸出沒有問題,下來咱們給userid傳一個number類型看看

父頁面傳參:
在這裏插入圖片描述
效果:
在這裏插入圖片描述
拋出異常了但是還會輸出,錯誤原因userid 應該是string類型,現在是number類型所以拋出異常。

二:參數設定默認值

參數設定默認值
在這裏插入圖片描述
userName是父頁面參數的key,這裏的key要和父頁面的key保持一致
在這裏插入圖片描述
咱們先看一下就是父頁面傳了userName是什麼樣子
在這裏插入圖片描述
在這裏插入圖片描述
咱們現在試一下就是把父頁面的userName參數刪掉會不會使用默認的值呢?
在這裏插入圖片描述
在這裏插入圖片描述
這時候咱們設置的userName的默認值生效了,以上面二種情況來看如果父頁面沒有設置參數的話子頁面會自動生效默認值,如果傳參了會自動覆蓋默認值。

三:父頁面傳參通過子頁面傳遞到孫子頁面(全家福)
父頁面傳遞的參數子頁面接受,子頁面也可以通過key,value的形式來傳遞給孫子頁面但是一個二個參數可以那麼100個呢?咱們寫100個key,value???想想都知道這樣是不顯示的,哈哈 咱們可以通過 { …this.props } 來把所有的參數都給孫子頁面傳遞過去孫子頁面也是通過this.props.key來接收
在這裏插入圖片描述

源碼放到了 https://github.com/Liingot/react-demo

今天就到這裏,祝大家週末愉快冬至快樂記得吃餃子呦 哈哈 溜了溜了 !!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章