Очистка повторяющихся тегов пользовательского интерфейса. - PullRequest
Новая
       9

Очистка повторяющихся тегов пользовательского интерфейса.

2 голосов
/ 16 мая 2019

Я строю резюме, используя React и Material UI. Я начинаю заканчивать с большим количеством сеток с элементами списка, которые содержат различную информацию. Мне интересно, будет ли цикл, принимающий данные из массива или объекта, работать в моем случае, и лучший способ приблизиться к этому

В основном этот код повторяется 4 или 5 раз, но он содержит разные данные. Я думал об использовании цикла, но первый размер элемента сетки равен 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: ...

Я хочу сократить весь этот повторяющийся код, если это возможно.

1 Ответ

3 голосов
/ 16 мая 2019

Вы можете использовать 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 и использовать карту для создания тегов этих компонентов и еще больше уменьшить дублирование кода

...