如何更新代表相同數據的兩個不同的React組件實例？

Question

說我已經定義了一個具有兩個道具的<Tag>組件： id和name 。 我的應用程序在兩個不同的位置渲染此組件，因此我有一個<Tag>組件，其ID為1出現了兩次，但所有者不同。 一個標簽由<Entries>組件擁有，另一個<Tags>由<Tags>組件擁有。

單擊<Tag> ，我想更改其狀態，並且希望所有其他具有相同id <Tag>組件也更改其狀態，以便它們匹配。 最好的方法是什么？ 所有<Tags>是否應具有相同的根組件？ 我不喜歡這個主意，因為我覺得這是一個脆弱的解決方案。

Answer 1

我認為您有兩種選擇：

1-反應方式

• 您應將狀態保留在<Tags>和<Entries>的公共所有者組件中。
• 您應該將變更處理程序從狀態所有者組件傳遞到<Tag>組件

• 標簽更改時，狀態所有者將同時更新<Tags>和<Entries> <Tag> 。

• 閱讀此書應該會給您帶來很多見識： http : //facebook.github.io/react/docs/thinking-in-react.html

2-純助焊劑方式

• 如果您的應用程序比您所說的復雜得多，則可以使用助焊劑體系結構。
• 為此，您應該在應用程序中實現操作，調度程序和存儲。

• 更改<Tag>后，您將調用一個操作，該操作又調用一個調度程序，而調度程序又被商店偵聽，該調度程序又向組件發出一個change事件。 然后，所有組件都將自己更新為新狀態。

• 您可以在此處找到有關通量的信息： http : //facebook.github.io/flux/docs/overview.html

Answer 2

id在html文檔中通常應該是唯一的。 最好的解決方案是將您的ID更改為類。