Question

我正在使用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: ...

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

Answer 1

您可以使用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" />
    // ... how many as you want
    </Fragment>
  );
}

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

清理重复的Material UI标签

1 个答案: