陣營模式爲列表編輯器對話框

Question

我想知道什麼是最好的模式在以下使用情況下使用：
我有一個項目清單在我ItemList.js

const itemList = items.map((i) => <Item key={i}></Item>); 

    return (
     <div>{itemList}</div> 
) 

每本Items有一個'編輯'按鈕，它應該打開一個對話框來編輯項目。
我應該在哪裏放置Dialog的代碼？

1. 在我ItemList.js =>讓我Item.js電話道具的方法來打開對話框（如何讓Dialog知道哪個Item被點擊？也許與終極版保存該項目的ID店內和獲取它在那裏？）
2. 在我Item.js =>這樣，每個項目將有自己的Dialog

PS項目數量是有限的，假設它是介於5和15之間的值。

Answer 1

你有大量的選項可供選擇：

1. 使用React 16 portals

此選項讓你呈現你的<Dialog>任何地方，你在DOM想要的，但仍然在ReactDOM一個孩子，從而保持控制並輕鬆通過您的<EditableItem>組件的道具的可能性。

廣場<Dialog>隨時隨地監聽特殊應用國家財產，如果你使用終極版例如，你可以創建它，把行動去改變它在<EditableItem>和connect。

使用反應context直接發送動作到Dialog，放置在頂部或任何地方。

就個人而言，我會選擇第一個選項。

Answer 2

您可以將<Dialog/>作爲應用程序組件樹內的獨立組件，並在應用程序的狀態包含某些屬性意思是「我們需要編輯這樣的id」。然後進入你的<Item/>你可以只有onClick處理程序將更新此屬性與自己的id，它會導致狀態更新，因此<Dialog/>將顯示。