Question

我正在尝试使用相同的组件创建3个组件，标题分别为“ month 1”，“ month 2”和“ month 3”，这些卡片包含一个表，我需要向数组中的每个卡片添加标题。

我试图使用属性来遍历数组，并且我已经在3张卡片中填充了3张表，但是我无法填充标题

App.JS

function App() {
  const months = ['month 1', 'month 2', 'month 3'];
  return (
    <div className='App'>
      <NavBar/>
      <>
        {months.map(month => <SimpleCard> {month}</SimpleCard>)}
      </>
      <Container>
        <Button variant="contained" color="primary" className='submitButton' id='submitButton'>
          Submit
        </Button>
      </Container>
    </div>

  );
}


card.JS

export default function SimpleCard() {
  const classes = useStyles();
  return (
    <Card className={classes.card}>
      <CardContent>
        <Typography className={classes.title} variant="h5" component="h2">
          {/*This is where the month should be displayed*/}

        </Typography>
        <Typography variant="body2" component="p">
          <Table/>
        </Typography>
      </CardContent>
    </Card>
  );
}

我需要在卡片上方的表格上方显示月份

Answer 1

因此，只需接受子项上的道具，然后将子项呈现给组件即可

export default function SimpleCard(props) {
  const classes = useStyles();
  return (
    <Card className={classes.card}>
      <CardContent>
        <Typography className={classes.title} variant="h5" component="h2">
          {props.children}
        </Typography>
        <Typography variant="body2" component="p">
          <Table/>
        </Typography>
      </CardContent>
    </Card>
  );
}

不过，对于您的用例，我认为最好将标题作为显式标题道具来传递

{months.map(month => <SimpleCard title={month} />)}

并进行渲染

{props.title}

从阵列创建动态卡

1 个答案: