react 元件傳值

2022-06-22 13:15:09 字數 1717 閱讀 1653

react 元件傳值與vue 類似,比vue更加簡單,省去了註冊的步驟,直接利用標籤就可傳值

父元件 給 子元件傳值:如下

react元件傳值----------------------------------------  父傳子

頁面效果:如下, 父元件 的狀態中,也就是state 中 有屬性: 御劍飛行,穿牆術,亢龍有悔。  子元件state為空, 通過 父元件 給 子元件傳值,獲取到 御劍飛行 和 穿牆術

react元件傳值----------------------------------------  子傳父

需要注意: react vue 在元件傳值的時候都是 單向資料流,

什麼是單向資料流? 

我個人的理解是:  資料只能從  父元件 流向 子元件, 就像河水一樣,從高處流向低處,  這是很正常的情況。但是有時候我們需要從 子元件 將資料傳遞到 父元件,react也可以做到。

有人會問既然都說了是 單向資料流,為什麼子元件還能給父元件傳值呢? 

我的理解是這樣的, react 和 vue 的確是單向資料流,並且資料是不能從子元件 流向 父元件的, 注意: 是不能流向,只是不能自然的流向而已,就向河水也不一定只能從高處 流向 低處一樣,通過人為的一些方法,也可以讓河水倒流。 react 中 子元件 向 父元件傳值也是乙個道理,第一 元件傳值肯定是 單向資料流的,也就是只能 父元件 流向 子元件。 但是,通過在   子元件  中呼叫 父元件中的方法,將子元件的資料通過函式的實參,傳遞給父元件,也就實現了 子元件 給 父元件傳值, 實質上並沒有違背 單向資料流的說法。 具體 實現步驟 如下

如下圖:  子元件 給 父元件傳值

點選 傳值按鈕 ---------------------------------------->實現效果如下圖:

react元件傳值----------------------------------------  兄弟傳值 

兄弟傳子: 需要把共享資料存放到他們公共的父元件中,進行狀態提公升

如下圖

點選傳授按鈕  如下圖

React元件傳值

父元件向子元件傳值 通過父元件的props屬性向子元件傳值 子元件 children.js import react,from react export default class children extends component render 父元件 parent.js import reac...

react 元件傳值

通過props實現 父元件parent import react from react import child from children class comment extends react.component render export default comment 子元件children...

React元件傳值

react的單向資料流與元件間的溝通。首先,我認為使用react的最大好處在於 功能元件化,遵守前端可維護的原則。先介紹單向資料流吧。react單向資料流 react是單向資料流,資料主要從父節點傳遞到子節點 通過props 如果頂層 父級 的某個props改變了,react會重渲染所有的子節點。剛...