在 React JSX 中運行循環並應用條件

Question

我編寫了一個 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> ); }

此代碼有效，但未優化。 我想學習一種有效的方法來寫這個。

Answer 1

如果這是您的目標，您可以使用 map function 和三元運算符來決定樣式，從而大大縮短此代碼。

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>
  );
}

現在關於您想要實現的任何更改，如果它不是太復雜，我會使用內聯樣式 go，如果它會根據卡片數量創建類名並將樣式移動到單獨的 css/scss 文件。

如果您有任何問題，請隨時在下面發表評論，並將相應地編輯我的答案。

更新：

如果您想連續顯示多張卡片（例如 4 張），您只需刪除第一個 Grid 標簽 xs={12} 因為這意味着它將占用整個空間並將其放在 map 之外function。

現在，如果您想擁有更多控制權並決定在返回行之前如何渲染，您可以編寫條件和多個返回，但最好的方法是不使用 Grid 標簽並擁有一個常規 div ，您可以完全設置內聯樣式或在外部 css/scss 文件中。