Блог

Здравствуйте, ниже у меня есть следующий код typograhy, который был заменен примерами, но представляет мой код, как вы можете видеть, мне приходится вызывать типографику несколько раз, и мне было интересно, есть ли более эффективный способ сделать это?

 <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>
  

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

Вы можете использовать функцию Array.prototype.map для сопоставления каждого значения с результатом функции.
Итак, я взял все имеющиеся у вас тексты, которые есть в массиве, и сопоставил их каждый с элементом typography с текстом внутри.

Вы можете прочитать все об этом с примерами здесь :https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map