映射函数内部的条件呈现

Question

我有一个数组中的按钮列表

const menuItems = [
{
key: "delete",
title: "Delete Order",
showFor: "all",
},
{
key: "cancel",
title: "Cancel Order",
showFor: "all",
},
{
key: "confirm",
title: "Confirm Order",
showFor: "unconfirmed",
},
];

现在，我想有条件地渲染它，例如，我将检查组件的当前状态，然后相应地渲染它。例如，在已确认的订单中，只显示删除而不显示确认。但对于未经确认的订单，我想把它们都展示出来。

目前我正在做这样的

{currentTable === "notconfirmed"
? menuItems.map((item) => {
return (
<Menu.Item key={item.key}>
<div>{item.title}</div>
</div>
</Menu.Item>
);
})
: menuItems
.filter((item) => item.showFor != "unconfirmed")
.map((kk) => {
return (
<Menu.Item key={kk.key}>
<div>
<div>{kk.title}</div>
</div>
</Menu.Item>
);
})}

它工作得很好，但看起来真的很乱，有干净的方法吗？

Answer 1

你可以在地图中添加这样的内容：

{menuItems.map((item) => {
if (
currentTable !== "notconfirmed" &&
item.showFor === "unconfirmed"
) {
return null;
}
return (
<Menu.Item key={item.key}>
<div>{item.title}</div>
</Menu.Item>
);
})}

Answer 2

好吧，就是这样做的。

您可以重构代码，将每个块的呈现逻辑移动到一个函数或组件中，使其更加干净。

Answer 3

我认为您需要重新映射数据。。。在数据中包含筛选逻辑不是一个好主意。。。属性showFor看起来像Code Smell

但是有一个例子可以改进您的代码。

如果你想保留你的filter功能，你可以使用这样的东西：

const component = (menuItems, currentTable = "notconfirmed") => {
const filterValue = currentTable === "notconfirmed" 

return <>
{menuItems.filter((item) => filterValue ? item.showFor === "unconfirmed" : item.showFor !== "unconfirmed").map((filterdItem) => (
<Menu.Item key={filterdItem.key}>
<div>
<div>{filterdItem.title}</div>
</div>
</Menu.Item>
))}
</>
}

为了避免过滤器进行较少的操作并优化代码，这是一个更好的选择：

const component = (menuItems, currentTable = "notconfirmed") => {
const filterValue = currentTable === "notconfirmed" ? "all" : "unconfirmed"

return <>
{menuItems.map((filterdItem) =>
(
filterdItem === filterValue && <Menu.Item key={filterdItem.key}>
<div>
<div>{filterdItem.title}</div>
</div>
</Menu.Item>
))}
</>
}