反应条件渲染映射数组

时间:2020-11-10 18:49:13

标签: javascript reactjs array-map conditional-rendering

我在此codesandbox

中重现了我的情况

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

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

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

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

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

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

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

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

答案 2 :(得分: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>