最佳实践是什么 - 循环内的无头 UI 模态 - 反应.js

Question

我一个月前才开始我的React之旅，我有一个问题(我可能听起来很傻)，它在我的脑海里从过去的2-3天。

问题:

假设我们有一个超级英雄列表表，每一行都包含一个Edit按钮，点击它会打开一个带有Edit表单的Headless UIModal。

现在我关心的是，我应该把模态放到super - heroes循环中，还是在循环之外创建模态和State ?我们将从循环内部更新状态以打开/关闭外部模态。这将被认为是一个很好的实践，也有利于性能。

我想:

我认为Headless UI的模态是这样工作的:每当模态get打开时，只有它被渲染到DOM。所以把Modal组件放在循环中并不重要。

---

我不需要帮助的代码，只是给一些解释真的很感激。

谢谢。

Answer 1

在不同的文件中创建对话框组件:

import { useState } from 'react'
import { Dialog } from '@headlessui/react'
export default function MyDialog(props) {
const {isOpen, selectedItem, handleClose} = props
return (
<Dialog open={isOpen} onClose={handleClose}>
<Dialog.Panel>

... YOUR UPDATE FORM 
<button onClick={() => {
// YOUR UPDATE LOGIC 
//NOTE : YOU HAVE THE SELECTED ITEM
handleClose();
}}>Update</button>
<button onClick={handleClose}>Cancel</button>
</Dialog.Panel>
</Dialog>
)
}

现在创建将在其中显示表格的页面:

import MyDialog from "../";
const [selectedItem, setSelectedItem] = useState({});
const [openDialog, setOpenDialog] = useState(false);
// your logic
return (
<>
<table>
<tr>
<th>Hero name</th>
<th>Edit Hero</th>
</tr>
{heros.map((hero) => (
<tr key={hero.id}>
<td>hero.name</td>
<td>
<button
onClick={() => {
setSelectedItem(hero);
setOpenDialog(true);
}}
>
edit
</button>
</td>
</tr>
))}
</table>
<MyDialog
isOpen={openDialog}
selectedItem={selectedItem}
handleClose={() => {
setOpenDialog(false);
setSelectedItem({});
}}
/>
</>
);

每次点击按钮，页面组件将重新渲染selectedItem = the_selected_item和isOpen = true，所以MyDialog组件打开并接收selectedItem，你在里面更新你的项目，然后关闭它

Answer 2

更好的解决方案是将模态保持在循环之外，并根据父组件中的状态打开/关闭它。现在，为了避免在有更改时再次重新呈现所有列表项，可以通过记忆列表项组件轻松完成，它将解决性能问题。