4 react 元件之間傳值。

2022-08-23 22:33:12 字數 2685 閱讀 3098

1、傳值:

都是使用props和state結合得方式進行元件之間得傳值

再react中傳值得話是父子元件之間得傳值,一般會把父元件中得state值通過props傳給子元件,再子元件中使用props進行接收

實現方法:

把父元件中得text狀態通過props傳給子元件,然後再子元件中使用props進行接收

react是乙個單向資料流,換句話來說資料得流向是單向得,使用props只能讓父元件給子元件傳值,但是不能讓子元件給父元件進行傳值,只要是父元件中得狀態值發生變化那麼子元件就會重新渲染重新獲取props屬性值

父元件改變狀態值執行順序:

父元件得state改變之後,會引起父元件得重新渲染,再渲染過程中,那麼子元件得text屬性就會重新被賦值,子元件接收到父元件傳過來得值得變化,那麼就會引起重新渲染

再這種情況下形成從上而下得資料流,react是單向得資料流,「向」方向是向下得

2、把父元件得input中輸入得內容作為傳給子元件得值

再傳值得時候,就只能傳乙個值嗎?相傳多少個就能傳多少個

3、父元件給孫子元件傳值

實現原理:借助中間元件son元件,先讓父元件給son元件傳值,然後son元件再給grandson傳值

4、子元件給父元件傳值:**函式得方式進行傳值得

原理:再父元件中寫乙個函式(有參函式,引數得作用:為了接收子元件傳過來值)  這個函式不是再父元件中呼叫得實在子元件中進行呼叫

5、使用**函式進行父子元件傳值:子元件給父元件傳值

原理:再父元件中設定乙個有參函式,通過傳值的方式把這個函式傳給子元件,然後再子元件呼叫這個函式的同時,把需要的引數作為子元件傳給父元件的值,然後這個引數是再父元件中進行接收和設定的

6、refs屬性

refs是react中提供給我們訪問dom元素或者某個元件例項的乙個屬性

可以通過這個屬性獲取到當前需要獲取的某乙個元件例項或者是dom元素

一般後邊會跟乙個**函式,它會把我們需要的值返回到這個**函式的第乙個引數中

7、通過ref屬性訪問dom元素

實現效果:單機登入按鈕,把dom中的input裡邊的value獲取出來進行列印

想要獲取哪個dom節點或元件例項就給誰加上ref屬性

只要是能找到當前的dom元素或者是當前的元件例項,那麼就可以及逆行任何操作,包括當前這個元件例項中的任意的乙個狀態和任意的乙個方法都可以進行使用

8、獲取ref屬性的三種方法:

使用**函式的方式,把返回值作為第乙個引數(這個引數獲取的就是當前的dom或例項)

this.son=son}/>

第二種:直接寫使用refs進行獲取:

this.refs.son或this.refs['son']

9、context:

如果父元件給子元件傳值得話使用得是props進行傳值得,一旦元件得層級巢狀很深得話,使用props進行傳值得這種方式就不合適了。react提供了一種context得傳遞資料得方式

context原理:context就相當於是乙個全域性變數,我們只需要將需要傳遞得資料放在這個變數中,不管元件樹多麼負責,巢狀有多深,子元件都可以從context中獲取需要得值

10、實現context

父元件:

使用getchildcontext方法來設定context,返回得就是乙個context物件

使用childcontexttypes來驗證getchildcontext返回得物件型別

子元件:

使用contexttypes來嚴重需要驗證得context型別

直接通過this.context來獲取想要獲取得context的值即可

11、總結context傳值的方式

乙個元件通過getchildcontext方法返回乙個context物件,這個物件就是子元件中需要獲取的context物件,提供context元件的必須有childcontexttypes作為對context的驗證和宣告

如果乙個元件中設定了context,那麼它的子元件可以隨時獲取context中設定的資料,這個context就相當於是乙個全域性變數。任意深度的子元件都可以獲取到,但是都必須要通過contexttype啥的宣告才悻悻,然後使用this.context進行獲取

12、context好處:

context打破了常規的元件之間傳值通過props的方式,極大的增加了元件之間的耦合性,並且就像使用全域性變數一樣,context裡邊的資料能被隨意修改

再不適用第三方管理狀態的話,再多個元件之間使用context能給我們帶來很大的方便

總結:

元件之間的傳值:

方法一:父元件給子元件傳值:使用的是props

方法二:子元件給父元件傳值:**函式的方式

方法三:子元件給父元件傳值:ref屬性直接找到子元件獲取子元件中的資料

方法四:父元件給更深層次的子元件傳值:context

方法五:兄弟元件傳值:son1先傳值給父元件,然後父元件再傳值給son2

方法六:兄弟元件傳值:son1給父元件,父元件通過context傳值給son2子元件

react元件之間傳值

在做專案的過程中元件之間不可避免的要進行傳值的操作,本人寫react也已經寫了一年多了,現在總結一下react元件之間的傳值方式,希望能為您帶來幫助.1.父子元件之間傳值 1.在父元件中需要引入子元件,使用的時候跟標籤的寫法一樣,父元件把要傳的值寫到子元件裡,子元件通過this.props.name...

React之間的元件傳值

目前我有兩個元件 1.todoitem 2.todolist 其中todolist向todoitem傳值 傳值部分詳解 父元件向子元件傳值通過屬性的形式 import todoitem from todoitem 記得引入子元件 this.state.list.map item,index 為子元件...

react中元件之間的傳值

關於父子元件之間的傳遞 父元件 class parent extends react.component render 子元件 3.在子元件中使用props接收父元件傳遞過來的值 const child props reactdom.render document.getelementbyid ro...