反应条件渲染映射数组

Question

中重现了我的场景

我有一个包含 5 个元素的标签数组

const tagsList = ["Covid 19", "Business", "Energy", "Sport", "Politics"];

我正在为每个标签映射我的 Chip 组件

  {tagsList.map((tag) => (
    <Chip label={tag} />
  ))}

我想说的是，如果标签列表长度大于 2（这是我在 codesandbox 中的情况），请向我展示带有剩余标签的芯片，即 3（长度 - 2）。

如何在同一个地图功能中制作？还有其他方法吗？

Answer 1

如果列表大小大于 2，您可以使用 tagsList.slice(2)。

export default function OutlinedChips() {
  const classes = useStyles();

  const tagsList = ["Covid 19", "Business","Energy", "Sport", "Politics"];

  return (
    <div className={classes.root}>
      {(tagsList.length > 2 ? tagsList.slice(2) : tagsList).map((tag) => (
        <Chip label={tag} />
      ))}
    </div>
  );
}

工作代码 - https://codesandbox.io/s/material-demo-forked-31f2w?file=/demo.js

Answer 2

您可以在 map 函数中收集索引（元素在列表中的位置）并根据您的需要执行操作，如果我理解正确的话，您可以这样做：

return (
    <div className={classes.root}>
      {/* Change to shortTagsList for check the shortest */}
      {tagsList.map((tag, index) => {
        let length = tagsList.length;
        console.log(length);
        return (
          (length > 2 && index > 2 && <Chip label={tag} />) ||
          (length <= 2 && <Chip label={tag} />)
        );
      })}
    </div>
  );

codesandbox

Answer 3

如果你不介意不从位置 0 开始，你可以这样做：

<div className={classes.root}>
      {(tagsList.length > 2 ? tagsList.slice(3, 5) : tagsList).map((tag) => (
        <Chip label={tag} />
      ))}
      {tagsList.length > 2 && <Chip label={tagsList.length - 2} /> }
</div>

反应条件渲染映射数组

React Conditional rendering mapping an array

javascript

array-map

reactjs

conditional-rendering