Question

您好，下面我有以下打字错误代码已被示例替换，但确实代表了我的代码，如您所见，我不得不多次调用Typography，并且想知道是否有更有效的方法来执行此操作？

<Typography className = { classes.titleText } variant="title" >Main Details</Typography><Divider />
                    <Typography className = { classes.titleText } variant="subheading" >Example: </Typography>
                    <Typography className = { classes.titleText } variant="subheading" >Example:  </Typography>
                    <Typography className = { classes.titleText } variant="subheading" >Example:  </Typography>
                    <Typography className = { classes.titleText } variant="subheading" >IExample:  </Typography>
                    <Typography className = { classes.titleText } variant="subheading" >Example: </Typography>
                    <Typography className = { classes.titleText } variant="subheading" >Example:  </Typography>
                    <Typography className = { classes.titleText } variant="subheading" >Example:  </Typography>
                    <Typography className = { classes.titleText } variant="subheading" >Example:  </Typography>
                    <Typography className = { classes.titleText } variant="subheading" >Example:  </Typography>

Answer 1

["Text1","Text2",...,"TextN"].map(x => {
       <Typography className = { classes.titleText } variant="subheading">{x}</Typography>
})

您可以使用Array.prototype.map函数将每个值映射到函数的结果。因此，我将所有您拥有的文本（位于数组中）都映射到带有内部文本的版式元素中。

您可以在此处通过示例阅读所有内容： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

使材料ui的版式更有效？

1 个答案: