React 条件渲染映射数组

Question

我在这个codesandbox中重现了我的场景我有一个包含 5 个元素的标签数组const tagsList = ["Covid 19", "Business", "Energy", "Sport", "Politics"];我正在为我的Chip组件的每个标签进行映射  {tagsList.map((tag) => (    <Chip label={tag} />  ))}我想说的是，如果标签列表长度大于2（这是我在codesandbox中的情况），则向我显示带有剩余标签的芯片，即3（长度-2）。我怎样才能在同一个地图功能中制作？还有其他办法吗？

Answer 1

tagsList.slice(2)如果列表大小大于 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

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

Answer 3

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

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>

  );

代码沙盒