阵营模式为列表编辑器对话框

问题描述：

我想知道什么是最好的模式在以下使用情况下使用：
我有一个项目清单在我ItemList.js阵营模式为列表编辑器对话框

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

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

每本Items有一个'编辑'按钮，它应该打开一个对话框来编辑项目。
我应该在哪里放置Dialog的代码？

在我ItemList.js =>让我Item.js电话道具的方法来打开对话框（如何让Dialog知道哪个Item被点击？也许与终极版保存该项目的ID店内和获取它在那里？）
在我Item.js =>这样，每个项目将有自己的Dialog

PS项目数量是有限的，假设它是介于5和15之间的值。

答

你有大量的选项可供选择：

此选项让你呈现你的<Dialog>任何地方，你在DOM想要的，但仍然在ReactDOM一个孩子，从而保持控制并轻松通过您的<EditableItem>组件的道具的可能性。

广场<Dialog>随时随地监听特殊应用国家财产，如果你使用终极版例如，你可以创建它，把行动去改变它在<EditableItem>和connect。
使用反应context直接发送动作到Dialog，放置在顶部或任何地方。

就个人而言，我会选择第一个选项。

开始=“2”>

答

您可以将<Dialog/>作为应用程序组件树内的独立组件，并在应用程序的状态包含某些属性意思是“我们需要编辑这样的id”。然后进入你的<Item/>你可以只有onClick处理程序将更新此属性与自己的id，它会导致状态更新，因此<Dialog/>将显示。