React 条件渲染映射一个数组答案

【问题标题】：React Conditional rendering mapping an arrayReact 条件渲染映射一个数组
【发布时间】：2021-02-22 17:57:58
【问题描述】：

我在这个codesandbox中重现了我的场景

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

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

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

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

我想说如果 taglist 长度大于 2（这是我在 codesandbox 中的情况）向我展示带有标签的芯片，它们是 3（长度 - 2）。

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

【问题讨论】：

我并不完全清楚您要的是什么，但听起来好像您只需要数组的 slice。
是的，你能用代码回答吗，谢谢
当您说“左”时，您的意思是如何在屏幕上定位它们，或者您的意思是显示前 3 个元素？
显示前 3 个元素并放置一个仅包含数字 2 的额外元素（即剩下的标签）

标签： javascript reactjs array-map conditional-rendering

【解决方案1】：

如果你不介意不从位置 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>

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

如果列表大小大于 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

【讨论】：

几乎完美，谢谢，我刚刚编辑了 tagsList.slice(0, 2) 以显示前 2 个元素，我需要显示一个带有剩余标签数量的芯片 (3)