时间戳

首页 > 解决方案 > 在 React JSX 中运行循环并应用条件

javascript - 在 React JSX 中运行循环并应用条件

问题描述

我编写了一个 React 组件，它将在网格中呈现 Material UI Cards。一排会有4张牌。如果卡的总数可以被 4 整除，那么这不是问题，但是如果不能被 4 整除，我如何添加条件来检查和渲染卡。我正在编写函数来渲染 3 张卡、2 张卡或 1 张卡，具体取决于最后还剩下什么。

这是我的 React 代码，我需要优化以呈现网格中的元素。

export default function NestedGrid(props) {
  const classes = useStyles();

  const items = [];
  
  function returnFourCards(i) {
    return (
      <Grid
        container
        item
        xs={12}
        spacing={3}
        className={classes.gridContainer}
      >
        <React.Fragment>
          <Grid item xs={3}>
            <Link
              to={"/updategroup/" + props.groupList[i].Number}
              className={classes.linkStyle}
            >
              <GroupsCard
                AD_groups={props.groupList[i].AD_groups}
                Team={props.groupList[i].Number}
                Owner={props.groupList[i].Owner}
                Email={props.groupList[i].Email}
                Name={props.groupList[i].Name}
              />
            </Link>
          </Grid>
          {console.log(i++)}
          <Grid item xs={3}>
            <Link
              to={"/updategroup/" + props.groupList[i].Number}
              className={classes.linkStyle}
            >
              <GroupsCard
                AD_groups={props.groupList[i].AD_groups}
                Team={props.groupList[i].Number}
                Owner={props.groupList[i].Owner}
                Email={props.groupList[i].Email}
                Name={props.groupList[i].Name}
              />
            </Link>
          </Grid>
          {console.log(i++)}
          <Grid item xs={3}>
            <Link
              to={"/updategroup/" + props.groupList[i].Number}
              className={classes.linkStyle}
            >
              <GroupsCard
                AD_groups={props.groupList[i].AD_groups}
                Team={props.groupList[i].Number}
                Owner={props.groupList[i].Owner}
                Email={props.groupList[i].Email}
                Name={props.groupList[i].Name}
              />
            </Link>
          </Grid>
          {console.log(i++)}
          <Grid item xs={3}>
            <Link
              to={"/updategroup/" + props.groupList[i].Number}
              className={classes.linkStyle}
            >
              <GroupsCard
                AD_groups={props.groupList[i].AD_groups}
                Team={props.groupList[i].Number}
                Owner={props.groupList[i].Owner}
                Email={props.groupList[i].Email}
                Name={props.groupList[i].Name}
              />
            </Link>
          </Grid>
          {console.log(i++)}
        </React.Fragment>
      </Grid>
    );
  }

  function returnThreeCards(i) {
    return (
      <Grid container item xs={12} spacing={3}>
        <React.Fragment>
          <Grid item xs={3}>
            <Link
              to={"/updategroup/" + props.groupList[i].Number}
              className={classes.linkStyle}
            >
              <GroupsCard
                AD_groups={props.groupList[i].AD_groups}
                Team={props.groupList[i].Number}
                Owner={props.groupList[i].Owner}
                Email={props.groupList[i].Email}
                Name={props.groupList[i].Name}
              />
            </Link>
          </Grid>
          {console.log(i++)}
          <Grid item xs={3}>
            <Link
              to={"/updategroup/" + props.groupList[i].Number}
              className={classes.linkStyle}
            >
              <GroupsCard
                AD_groups={props.groupList[i].AD_groups}
                Team={props.groupList[i].Number}
                Owner={props.groupList[i].Owner}
                Email={props.groupList[i].Email}
                Name={props.groupList[i].Name}
              />
            </Link>
          </Grid>
          {console.log(i++)}
          <Grid item xs={3}>
            <Link
              to={"/updategroup/" + props.groupList[i].Number}
              className={classes.linkStyle}
            >
              <GroupsCard
                AD_groups={props.groupList[i].AD_groups}
                Team={props.groupList[i].Number}
                Owner={props.groupList[i].Owner}
                Email={props.groupList[i].Email}
                Name={props.groupList[i].Name}
              />
            </Link>
          </Grid>
          {console.log(i++)}
        </React.Fragment>
      </Grid>
    );
  }

  function returnTwoCards(i) {
    return (
      <Grid container item xs={12} spacing={3}>
        <React.Fragment>
          <Grid item xs={3}>
            <Link
              to={"/updategroup/" + props.groupList[i].Number}
              className={classes.linkStyle}
            >
              <GroupsCard
                AD_groups={props.groupList[i].AD_groups}
                Team={props.groupList[i].Number}
                Owner={props.groupList[i].Owner}
                Email={props.groupList[i].Email}
                Name={props.groupList[i].Name}
              />
            </Link>
          </Grid>
          {console.log(i++)}
          <Grid item xs={3}>
            <Link
              to={"/updategroup/" + props.groupList[i].Number}
              className={classes.linkStyle}
            >
              <GroupsCard
                AD_groups={props.groupList[i].AD_groups}
                Team={props.groupList[i].Number}
                Owner={props.groupList[i].Owner}
                Email={props.groupList[i].Email}
                Name={props.groupList[i].Name}
              />
            </Link>
          </Grid>
          {console.log(i++)}
        </React.Fragment>
      </Grid>
    );
  }

  function returnOneCard(i) {
    return (
      <Grid container item xs={12} spacing={3}>
        <React.Fragment>
          <Grid item xs={3}>
            <Link
              to={"/updategroup/" + props.groupList[i].Number}
              className={classes.linkStyle}
            >
              <GroupsCard
                AD_groups={props.groupList[i].AD_groups}
                Team={props.groupList[i].Number}
                Owner={props.groupList[i].Owner}
                Email={props.groupList[i].Email}
                Name={props.groupList[i].Name}
              />
            </Link>
          </Grid>
          {console.log(i++)}
        </React.Fragment>
      </Grid>
    );
  }

  for (let i = 0; i < props.groupList.length; ) {
    let cardContent;
    if (props.groupList.length - i >= 4) {
      cardContent = returnFourCards(i);
      i += 4;
    } else if (props.groupList.length - i === 3) {
      cardContent = returnThreeCards(i);
      i += 3;
    } else if (props.groupList.length - i === 2) {
      cardContent = returnTwoCards(i);
      i += 2;
    } else if (props.groupList.length - i === 1) {
      cardContent = returnOneCard(i);
      i += 1;
    }
    items.push(cardContent);
  }

  return (
    <div className={classes.root}>
      <Grid container spacing={1}>
        {items.map((item) => item)}
      </Grid>
    </div>
  );
}

此代码有效，但未优化。我想学习一种有效的方法来写这个。

标签： javascriptreactjs

解决方案

如果这是您的目标，您可以使用 map 函数和三元运算符来决定样式，从而大大缩短此代码。

export default function NestedGrid(props) {
  const classes = useStyles();

  const { groupList } = props;

  return (
    <div className={classes.root}>
      <Grid container spacing={1}>
        {groupList.map((item, index) => {
          return (
            <Grid container item xs={12} spacing={3}>
              <Grid item xs={3}>
                <Link
                  to={"/updategroup/" + item[index].Number}
                  className={classes.linkStyle}
                >
                  <GroupsCard
                    AD_groups={item[index].AD_groups}
                    Team={item[index].Number}
                    Owner={item[index].Owner}
                    Email={item[index].Email}
                    Name={item[index].Name}
                  />
                </Link>
              </Grid>
            </Grid>
          );
        })}
      </Grid>
    </div>
  );
}

现在关于您想要实现的任何更改，如果它不太复杂，我会使用内联样式，如果它会根据卡片数量创建类名并将样式移动到单独的 css/scss 文件。

如果您有任何问题，请随时在下面发表评论，并将相应地编辑我的答案。

更新：

如果您想连续显示超过 1 张卡片（例如 4 张），您只需删除第一个 Grid 标记 xs={12} 因为这意味着它将占用整个空间并将其放在地图之外功能。

现在，如果您想拥有更多控制权并决定在返回行之前如何渲染，您可以编写条件和多个返回，但最好的方法是不使用 Grid 标签并拥有一个常规 div ，您可以完全设置内联样式或在外部 css/scss 文件中。

推荐阅读