反应条件渲染映射数组

如何解决反应条件渲染映射数组

中重现了我的情况

我有一个由5个元素组成的标签数组

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

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

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

我想说的是，如果标签列表的长度大于2（在codesandbox中就是这种情况），则向我显示剩下的标签为3（长度-2）的芯片。

如何使用相同的地图功能？还有其他方法吗？

解决方法

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

您可以在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

如果您不介意不在位置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>