从数组创建动态卡片

Question

我正在尝试使用相同的组件创建 3 个，标题为 "month 1" "month 2" 和 "month 3" 这些卡片包含一个 table，我需要添加一个 header 到数组中的每张卡片。

我已尝试使用属性遍历数组，并且已将 3 table 填充到 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>
  );
}

我需要将月份显示在卡片内，在 table

上方

Answer 1

所以只需接受 child 上的道具，并渲染传递给组件的 children

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}

从数组创建动态卡片

Creating dynamic cards from an array

arrays

dynamic

reactjs

material-ui

react-props