React基礎(七):組件引用,組件通信

我們前面有說過,組件是可以套在一起來用的,但是也僅僅是限於嵌套在一起,父組件和子組件並沒有直接的關係,最多就是傳了個參,實際上來說,我們經常會需要組件之間相互來配合。

那麼先從最簡單的開始,組件之間,如何相互去引用。

首先,我們還是創建一對父子組件。

子組件裏面有個狀態 a,並且顯示出來。

父組件裏面有個按鈕,並且點擊了之後,可以讓子組件有反應。

那麼在做之前,我們要先考慮一個問題,父組件裏面一定只有這一個子組件嗎?

不一定,可能會有非常多的組件。

所以這種情況下,我們得先給 Child 取個名字,不然的話,萬一將來多了,一大堆組件裏面根本就分不清,也就沒有辦法去引用。

我們平常取名字的時候,一般都是加 id 或者 class,但是這些在 React 裏面都是不適用的。

比方說 id,一般來說 id 在整個頁面裏面只能用一次,而我們寫的組件天然就具備重用的特性,所以用 id 就只能用一次。

那用 class 呢?但是如果真的多了,它們都是同一個 class,那你從頁面裏面去選一個,你也分不清到底要的是第幾個。

那麼 React 給我們提供了一個新的方法,叫做 ref。

ref 全稱是 reference,也就是引用的意思。

注意:我們用的時候是需要帶上 s 的 this.refs。因爲它是我這個裏面,所有東西引用的集合。

可以看到,this.refs 就是一個 json

然後我們在給一個 input 加上 ref:

那麼現在在點按鈕,就有 2 個 ref 了,並且 child1 是一個組件,txt1 只是一個普通的 input 框。

那如果我現在想讓子組件的 a 自加,就可以在父組件中用到 ref 了:

可以看到,效果是能出來的。但是這樣做是非常不好的。

首先,狀態這個東西是 Child 的,那麼就應該是它內部在用,外部不要去改它的狀態。

如果外部更改了狀態,就會導致這兩個組件有非常大的依賴,這樣的話,這兩個組件就沒辦法拿到其他地方用了。

所以我們還是希望這種操作由 Child 自己來完成。

那麼我們可以讓 Child 對外暴漏一個 add 方法,這個 add 它可以自己來做一個 setState。

可以看到,一樣是能實現的,並且這種方法會更好一些。

所以這種情況,我們可以暴漏一個對外的方法,你要做什麼,就來調這個方法,不要私自去動別人的狀態。

那麼這就是組件的引用,ref 的用法也非常的簡單,你想調用誰,就給誰去取個名字,它可以直接去引用子組件,以及裏面的東西,非常的方便。

需要注意的是:

1,ref 是需要引用的組件,而 refs 是父級中引用所有 ref 組件

2,和 Vue 有所不同,React 的 ref 不能重複,如果重複,後面的會覆蓋掉前面的。

 

然後我們在來看下,組件之間如何相互通信:

其實,我們剛纔已經完成了一個通信,父組件 如何去找 子組件。

父找子,需要注意的是直接使用子組件的狀態非常不好,所以應該是讓子組件暴漏一個方法出來。

那麼 子組件 如何去找 父組件 呢?

父組件給子組件傳了一個屬性 parent,值就是父組件自己。那麼子組件點擊按鈕的時候,可以看來 this.props 裏面的打印,父組件傳過來了。

那麼剩下的事就比較好辦了,我們可以通過 this.props.parent 來做一些事。

如果直接通過 this.props.parent.setState() 來修改,這樣是不好的。所以和上面一樣,我們可以調用父組件裏面暴露出來的方法:

它們的原理類似,只是父組件需要主動向子組件暴漏自己,也就是 this。

所以,簡單的組件通信,可以通過 ref 實現,但更復雜的通信則必須依賴如 redux 這種大型框架輔助。

 

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