在 React 的选项卡中迭代数组

Question

我有一个名为 paymentMethods 的数组，我想将它迭代到选项卡？我的问题是我无法迭代它。

请在这里查看我的codesandbox CLICK HERE

   <div>
      {paymentMethods && paymentMethods.length > 0 ? (
        <Paper square className={classes.root}>
          <Tabs
            value={value}
            onChange={handleChange}
            variant="fullWidth"
            indicatorColor="secondary"
            textColor="secondary"
            aria-label="icon label tabs example"
          >
            <Tab icon={<PhoneIcon />} label="Card" />
            <Tab icon={<FavoriteIcon />} label="Paypal" />
          </Tabs>

          <Grid container spacing={4}>
            <Grid item xs={12} sm={6} md={3}>
              <Card className={classes.card}>
                <CardHeader className={classes.cardHeader} title={`****`} />
                <CardContent className={classes.content}>
                  <Table className={classes.table} aria-label="simple table">
                    <TableBody>
                      <TableRow>
                        <TableCell variant="head">Type</TableCell>
                        <TableCell variant="body">Card</TableCell>
                      </TableRow>
                      <TableRow>
                        <TableCell variant="head">Card Number</TableCell>
                        <TableCell variant="body">***</TableCell>
                      </TableRow>
                      <TableRow>
                        <TableCell variant="head">Expiry Month</TableCell>
                        <TableCell variant="body">12/2</TableCell>
                      </TableRow>
                      <TableRow>
                        <TableCell variant="head">Expiry Year</TableCell>
                        <TableCell variant="body">2021</TableCell>
                      </TableRow>
                      <TableRow>
                        <TableCell variant="head">CVC</TableCell>
                        <TableCell variant="body">***</TableCell>
                      </TableRow>
                    </TableBody>
                  </Table>
                </CardContent>
              </Card>
            </Grid>
          </Grid>
        </Paper>
      ) : (
        <Typography>no available</Typography>
      )}
</div>

Answer 1

您可能正在寻找这样的东西：

  <Tabs
    value={value}
    onChange={handleChange}
    variant="fullWidth"
    indicatorColor="secondary"
    textColor="secondary"
    aria-label="icon label tabs example"
  >
  {paymentMethods.map(p => (
      <Tab icon={<PhoneIcon />} label="{p.label}" />
  ))}
  </Tabs>

请注意，标签和 onChange 代码只是猜测 - 您可能想将 p 中的一些内容放入模板中，但我不知道具体是什么。

Answer 2

Here 我试着做了一个工作示例。您可以组织 json 以提高循环效率。我刚刚创建了另一个常量来存储更多参数以放入选项卡中。

        {paymentmethodNames.map((p, index) => (
          <Tab icon={p.icon} label={p.title} {...a11yProps(index)} />
        ))}

选项卡确实需要一些基于索引的面板选择。面板通过循环 paymentMethods JSON 数据来填充内容。当 JSON 结构发生变化时，只需添加条件语句即可。例如，PayPal 没有 CVC。

在 React 的选项卡中迭代数组

Iterate Array in Tabs in React

javascript

arrays

ecmascript-6

reactjs

react-material