让material ui的Typography更高效？答案

【问题标题】：Making material ui's Typography more efficient?让material ui的Typography更高效？
【发布时间】：2019-08-11 01:23:18
【问题描述】：

您好，下面我有以下印刷代码已被示例替换，但确实代表了我的代码，正如您所见，我必须多次调用 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>

【问题讨论】：

标签： javascript reactjs material-design

【解决方案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

【讨论】：

@double-beep 谢谢你，你是完全正确的。我已经添加了一些解释。