Javascript 如何重写代码以使代码在反应中保持干燥

我是一个比较新的反应者，我想知道如何重写这段代码，让它变得枯燥。正如您所见，卡片内容和排版几乎相同，但唯一的区别是

和

感染
{新日期（lastUpdate）.toDateString（）}
新冠病毒-19活跃病例数
恢复
{新日期（lastUpdate）.toDateString（）}
从新冠病毒-19中回收的数量
死亡
{新日期（lastUpdate）.toDateString（）}
由新冠病毒-19引起的死亡人数

如果您可以提取数据并将其保持在您的状态或通过道具传递，您可以简单地映射数据，以呈现网格->卡片->排版组件。两种方式都可以

const data = [{
  type: 'infected',
  displayName: 'Infected',
  count: {
    start: 0
  },
  duration: 2.5,
  displayStatusText: 'Number of active cases of COVID-19',
},
{
  type: 'recovered',
  displayName: 'Recovered',
  count: {
    start: 0
  },
  duration: 2.5,
  displayStatusText: 'Number of recoveries from COVID-19',
},
{
  type: 'infected',
  displayName: 'Infected',
  count: {
    start: 0
  },
  duration: 2.5,
  displayStatusText: 'Number of deaths caused by COVID-19',
}];

在render方法的返回中，您可以这样映射组件

render() {
    return (
      <div className={styles.container}>
        <Grid container spacing={3} justify="center">
          {this.state.data.map((item, i) => {
            return (
              <Grid key={i} item component={Card} xs={12} md={3}
                className={cx(styles.card, item.type === 'infected' ? styles.infected : item.type === 'recovered' ? styles.recovered : styles.deaths)}>
                <CardContent>
                  <Typography color="textSecondary" gutterBottom>
                    {item.type}
                  </Typography>
                  <Typography variant="h5" component="h2">
                    <CountUp start={item.count.start} end={item.type === 'infected' ? confirmed.value : item.type === 'recovered' ? recovered.value : deaths.value} duration={item.duration} separator="," />
                  </Typography>
                  <Typography color="textSecondary">
                    {new Date(lastUpdate).toDateString()}
                  </Typography>
                  <Typography variant="body2" component="p">
                    {item.displayStatusText}
                  </Typography>
                </CardContent>
              </Grid>
            );
          })}
        </Grid>
      </div>
    )
  }

render（）{
返回(
{this.state.data.map（（项，i）=>{
返回(
{item.type}
{新日期（lastUpdate）.toDateString（）}
{item.displayStatusText}
);
})}
)
}

---

这里唯一需要注意的是，您应该注意className和end属性是如何根据三元运算符的计算方式获取值的。

如果您只是担心

排版
组件，而它只是为了向各种文本添加适当的标记/样式，我不确定您是否真的需要更改任何内容。重复繁重的代码通常是不好的，但老实说，这更像是重复（类似但不完全相同）标记，在这种情况下，我每次都会选择“保持简单”而不是“不要重复自己”。我会将整个网格项移到一个单独的组件中。因此，一个更改（例如：更改断点或更改变量）只能在单个位置进行。
render() {
    return (
      <div className={styles.container}>
        <Grid container spacing={3} justify="center">
          {this.state.data.map((item, i) => {
            return (
              <Grid key={i} item component={Card} xs={12} md={3}
                className={cx(styles.card, item.type === 'infected' ? styles.infected : item.type === 'recovered' ? styles.recovered : styles.deaths)}>
                <CardContent>
                  <Typography color="textSecondary" gutterBottom>
                    {item.type}
                  </Typography>
                  <Typography variant="h5" component="h2">
                    <CountUp start={item.count.start} end={item.type === 'infected' ? confirmed.value : item.type === 'recovered' ? recovered.value : deaths.value} duration={item.duration} separator="," />
                  </Typography>
                  <Typography color="textSecondary">
                    {new Date(lastUpdate).toDateString()}
                  </Typography>
                  <Typography variant="body2" component="p">
                    {item.displayStatusText}
                  </Typography>
                </CardContent>
              </Grid>
            );
          })}
        </Grid>
      </div>
    )
  }