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

Posted 2021-05-05

我想知道在以下用例中使用的最佳模式是什么： 我的ItemList.js中有一个项目列表

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

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

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

1. 在我的ItemList.js =>让我的Item.js调用道具方法来打开对话框（如何让Dialog知道哪个Item被点击了？也许用Redux将项目的id保存在STORE中并从那里取出？）
2. 在我的Item.js =>这样每个项目都有自己的Dialog

附：项目数量有限，假设它是5到15之间的值。

答案

您有很多选择可供选择：

1. 使用React 16 portals

此选项允许您在DOM中的任何地方渲染<Dialog>，但仍然是ReactDOM中的子项，从而保持控制和轻松传递<EditableItem>组件中的道具的可能性。

2. 将<Dialog>放在任何地方并监听特殊的app状态属性，如果你使用Redux例如你可以创建它，在<EditableItem>和connect中放置动作来改变它。
3. 使用反应context将动作直接发送到Dialog，放在顶部或任何地方。

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

另一答案

您可以将<Dialog/>作为应用程序组件树中的单独组件，如果您的应用程序的状态包含一些意味着“我们需要使用这样的id编辑项目”的属性，则将其显示在一个案例中。然后进入你的<Item/>你可以有onClick处理程序，将用自己的id更新这个属性，它将导致状态更新，因此将显示<Dialog/>。

另一答案

我发现在这些场景中使用返回函数的函数很有用。不知道有多少最佳实践，但它已经变得非常方便。

如果你想让一个Dialog组件获得调用项的id，你可以这样做：

// itemList.js
openEditDialog = item => event => {
  console.log(`Editing item ${item.id}`);
}

const itemList = items.map((i) => 
  <Item
    key={i}
    onEdit={this.openEditDialog(i)} // using "this" supposing you're inside a class, otherwise omit
  />
);
...

然后在Item类或函数中使用不带参数的onEdit函数，解决了将项目或项目id“发送”到其父项的问题。

openEditDialog函数将一个item作为参数，并返回一个接收事件并返回一个值的新函数（完全适合React组件的任何onClick类型的属性）。当然，它知道项目并且可以使用它。