Javascript 列表编辑器对话框的反应模式

我想知道在以下用例中使用的最佳模式是什么：
我的

ItemList.js中有一个项目列表

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

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

const itemList=items.map（（i）=>）；
返回(
{itemList}
)

每个
项目
都有一个“编辑”按钮，该按钮应打开一个对话框以编辑该项目

我应该将
对话框放置在哪里

在我的
ItemList.js
=>中，使我的
Item.js
调用props方法来打开对话框（如何让
对话框
知道单击了哪个
项目
？可能使用Redux将项目的id保存在商店中并从那里获取？）
在我的
Item.js中
=>这样，每个项目都有自己的
对话框
p、 项目的数量是有限的，假设它是一个介于5和15之间的值。
您可以将您的
作为应用程序组件树中的单独组件，如果您的应用程序的状态包含一些表示“我们需要用这样的
id编辑项目”的属性，则可以将其显示出来。然后，在您的
中，只需单击
onClick
处理程序，该处理程序将使用自己的
id
更新此属性，它将导致状态更新，因此将显示
 您有很多选择：

使用
通过此选项，您可以在DOM中的任意位置渲染
，但仍可以作为ReactDOM中的子级渲染，从而保持控制和轻松传递
组件中道具的可能性

将
放置在任何位置并侦听特殊的应用程序状态属性，例如，如果您使用Redux，您可以创建它，请在
和
连接中放置更改它的操作

使用react
context
将操作直接发送到位于顶部或任何位置的
对话框

就个人而言，我会选择第一个选项。
更新了，以更好地回答问题并更全面地解决问题。另外，下面的注释中的建议是：不要使用返回函数的函数，而是使用内联函数

我认为简短的答案是：对话框代码应该放在列表旁边。至少，这对我来说是有意义的。在每个项目中放一个对话框听起来不太好

如果希望有单个对话框组件，可以执行以下操作：

import React, { useState } from "react";
import "./styles.css";

const items = [
  { _id: "1", text: "first item" },
  { _id: "2", text: "second item" },
  { _id: "3", text: "third item" },
  { _id: "4", text: "fourth item" }
];

const Item = ({ data, onEdit, key }) => {
  return (
    <div key={key}>
      {" "}
      {data._id}. {data.text}{" "}
      <button type="button" onClick={onEdit}>
        edit
      </button>
    </div>
  );
};

const Dialog = ({ open, item, onClose }) => {
  return (
    <div>
      <div> Dialog state: {open ? "opened" : "closed"} </div>
      <div> Dialog item: {JSON.stringify(item)} </div>
      {open && (
        <button type="button" onClick={onClose}>
          Close dialog
        </button>
      )}
    </div>
  );
};

export default function App() {
  const [isDialogOpen, setDialogOpen] = useState(false);
  const [selectedItem, setSelectedItem] = useState(null);

  const openEditDialog = (item) => {
    setSelectedItem(item);
    setDialogOpen(true);
  };

  const closeEditDialog = () => {
    setDialogOpen(false);
    setSelectedItem(null);
  };

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

  return (
    <>
      {itemList}
      <br />
      <br />
      <Dialog
        open={isDialogOpen}
        item={selectedItem}
        onClose={closeEditDialog}
      />
    </>
  );
}

import React，{useState}来自“React”；
导入“/styles.css”；
常数项=[
{u id:“1”，文本：“第一项”}，
{u id:“2”，案文：“第二项”}，
{u id:“3”，案文：“第三项”}，
{u id:“4”，案文：“第四项”}
];
常量项=（{data，onEdit，key}）=>{
返回(
{" "}
{data._id}.{data.text}{''}
编辑
);
};
常量对话框=（{open，item，onClose}）=>{
返回(
对话框状态：{打开？“打开”：“关闭”}
对话框项：{JSON.stringify（项）}
{打开&&(
关闭对话框
)}
);
};
导出默认函数App（）{
常量[isDialogOpen，setDialogOpen]=useState（false）；
const[selectedItem，setSelectedItem]=useState（null）；
常量openEditDialog=（项）=>{
setSelectedItem（项目）；
setDialogOpen（true）；
};
const closeEditDialog=（）=>{
setDialogOpen（假）；
setSelectedItem（空）；
};
const itemList=items.map（（i）=>(
openEditDialog（i）}data={i}/>
));
返回(
{itemList}




);
}

（或直接查看）
除了id之外，您对如何传递我们需要在该对话框中使用的道具有什么建议吗？例如，onClose处理程序、上下文值等？@PavloZhukov抱歉，我现在不使用React。最好单独发布问题坦率地说，这个答案并没有提供任何关于如何打开对话框的有用信息，只是提供了一些建议，我们可以使用这些建议简化激活行为时的id传递。然而，在我们的商业项目中，我们更喜欢使用内联箭头函数。甚至将一个事件与业务逻辑结合起来看起来也像是一个问题的混合体。唯一的例外可能是，如果您需要防止多个触发器触发该事件，但在我的实践中这是一种罕见的情况。IMHO
onEdit={（）=>this.openEditDialog（i）}
在这种情况下看起来更好。嗨，帕夫洛。我并不担心如何打开对话，因为这不是我要问的问题。但是，我扩展了这个示例，并采纳了您关于外观更好的onEdit函数的建议。我同意它不仅看起来更好，而且看起来更干净。希望这是有用的。当做