React.js：在元件之間共用狀態

如果你喜歡我的文章，可以請我一杯咖啡或分享給我:)

---

在本文中，我們將重點放在 react.js 中的元件之間共享狀態。

---

國家是孤立的、私有的

首先，當我們在組件中建立狀態時，我們必須了解這個狀態的行為。 元件內建立的狀態是元件的本機狀態。那麼這意味著什麼呢？

如果渲染同一個元件兩次，每個副本將具有完全隔離的狀態。更改其中一個組件不會影響另一個組件。 也就是說，更新相同兩個元件之一的狀態不會影響另一個元件。

讓我們用一個例子來解釋一下。

同一個元件渲染兩次並點選按鈕，結果如下。

輸出 :

如 gif 所示，每個副本都是完全隔離的，更改其中一個副本不會影響另一個副本。
如果您希望兩個元件保持狀態同步怎麼辦？在 React 中執行此操作的正確方法是從子元件中刪除狀態並將其新增至最接近的共用父元件。

---

現在只需 3 個步驟，讓我們保持兩個元件的狀態同步。 與 props 不同，state 完全特定於聲明它的組件。 要同步兩個組件的狀態，應將共享狀態提升到最近的公共父級，並作為 props.

傳遞給兩個組件

第 1 步：從子組件中刪除狀態

讓我們將 isActive 狀態轉移到 父組件，並將 isActive 加入 Panel 的 prop 清單。現在，Panel 的父組件可以透過將 isActive 作為 prop 向下傳遞來控制它。相反，Panel 組件現在無法控制 isActive 的值，它現在取決於父組件。

---

第 2 步：setIsActive 屬性

讓我們將更新狀態的函數作為 prop 傳送給 子元件。

---

第三步：onClick事件

當按鈕的onClick事件被觸發時，setIsActive將運行並更新狀態。

輸出 :

---

提升狀態通常會改變您儲存為狀態的內容的性質。因此，在本例中，它同時在兩個面板中處於活動狀態。 如果我們希望一次只有一個面板處於活動狀態？這表示 Accordion 公用 父元件 需要追蹤哪個面板是活動面板。它可以使用數字作為狀態變數的活動面板的索引，而不是 布林值 值：

const [activeIndex, setActiveIndex] = useState(0);

當 activeIndex 為 0 時，第一個面板處於作用中狀態，當其為 1 時，則為第二個面板。

點選任一面板中的「顯示」按鈕需要變更 Accordion 中的活動索引。面板無法直接設定 activeIndex 狀態，因為它是在 Accordion 內部定義的。 Accordion 元件需要明確允許面板 元件 透過將事件處理程序作為 prop:
向下傳遞來變更其狀態

 <Panel
    isActive={activeIndex === 0}
    onShow={() => setActiveIndex(0)}
  >
    ...
  </Panel>
  <Panel
    isActive={activeIndex === 1}
    onShow={() => setActiveIndex(1)}
  >
    ...
  </Panel>

輸出 :

---

結論

元件內建立的狀態對元件來說是本地的。在本文中，我們研究瞭如何在組件之間共享狀態。如果願意的話，可以在評論中談談組件之間共享狀態原則。

以上是React.js：在元件之間共用狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！