时间戳

首页 > 解决方案 > 清理重复的 Material UI 标签

reactjs - 清理重复的 Material UI 标签

问题描述

我正在使用 React 和 Material UI 构建简历。我开始以包含不同信息的列表项的大量网格结束。我想知道从数组或对象中获取数据的循环是否适用于我的情况以及处理它的最佳方法

基本上这段代码会重复 4 或 5 次，但它都包含不同的数据。我考虑过使用循环，但第一个 Grid 项目的大小是 xs={4} 并且与其水平的网格的大小为 xs={8} 但没有图标。

<Grid item xs={4}>
  <List>
    <ListItem>        
      <ListItemIcon >
        <School className={classes.icon}/>
      </ListItemIcon>
      <ListItemText 
        primary={
          <React.Fragment>
            <Typography className = {classes.school} variant="body1">
              The name of the school I attended goes here
            </Typography>
          </React.Fragment>
        }
        secondary="Year I attended this school"
      />
    </ListItem>
  </List>
</Grid>

<Grid item xs={8}>
  <List>
    <ListItem>        
      <ListItemText 
        primary={
          <React.Fragment>
            <Typography className = {classes.school} variant="body1">
              The certificate I received from that school goes here
            </Typography>
          </React.Fragment>
        }
        secondary="The subjects I completed as part of this certificate"   
      />
    </ListItem>
  </List>
</Grid>

在浏览器中看起来像这样：

<Icon> School 1                           Web Dev Certificate
2019                                      Topics: ...

<Icon> School 2                           Web Dev2 Certificate
2018                                      Topics: ...

<Icon> School 3                           Web Dev3 Certificate
2018                                      Topics: ...

<Icon> School 4                           Web Dev4 Certificate
2017                                      Topics: ...

<Icon> School 5                           Web Dev5 Certificate
2017                                      Topics: ...

如果可能的话，我想减少所有这些重复的代码。

标签： reactjsrefactoringmaterial-ui

解决方案

你可以使用props它。首先，使用将重复的代码创建一个组件：

function RepeatingComponent(props) {
  return (
    <Grid item xs={4}>
      <List>
        <ListItem>
          <ListItemIcon >
            <School className={classes.icon} />
          </ListItemIcon>
          <ListItemText
            primary={
              <React.Fragment>
                <Typography className={classes.school} variant="body1">
                  {props.nameOftheSchool} // props
            </Typography>
              </React.Fragment>
            }
            secondary={props.yearAttended} //props
          />
        </ListItem>
      </List>
    </Grid>

    <Grid item xs={8}>
      <List>
        <ListItem>
          <ListItemText
            primary={
              <React.Fragment>
                <Typography className={classes.school} variant="body1">
                  {props.theCertificate} // props
            </Typography>
              </React.Fragment>
            }
            secondary={props.theSubject} // props
          />
        </ListItem>
      </List>
    </Grid>
  );
}

export default RepeatingComponent;

然后你需要一个组件来调用所有这些RepeatingComponent并渲染然后传递道具：

import RepeatingComponent from 'path_to_component'

function ComponentToRender(props) {
  return (
    <Fragment> // every React component has to be inside of only one tag, the Fragments does nothing to the code, just hold other tags
      <RepeatingComponent nameOftheSchool="name1" yearAttended="year1" theCertificate="certificate1" theSubject="subj1" />
      <RepeatingComponent nameOftheSchool="name2" yearAttended="year2" theCertificate="certificate2" theSubject="subj2" />
      <RepeatingComponent nameOftheSchool="name3" yearAttended="year3" theCertificate="certificate3" theSubject="subj3" />
    // ... as many as you want
    </Fragment>
  );
}

您甚至可以在一个地图中组织.json并使用地图来创建这些组件标签并进一步减少代码重复

推荐阅读