Как я могу рефакторинг дубликата кода для формы отображения с помощью пользовательского интерфейса материала

Question

Я использовал материал пользовательского интерфейса для разработки моей формы.

Работает нормально, но мне просто интересно, есть ли другие способы свести к минимуму использование кодов, поскольку у меня около 800 строк кодов только для вывода.

Вот часть моего коды:

<GridContainer>
    // First Element
    <GridItem xs={12} sm={2}>
        <FormLabel className={classes.labelHorizontal}>User ID</FormLabel>
    </GridItem>

    <GridItem xs={12} sm={3}>
        <CustomInput
            formControlProps={{
              fullWidth: true
            }}
        />
    </GridItem>

    // Second Element
    <GridItem xs={12} sm={2}>
        <FormLabel className={classes.labelHorizontal}>Fullname</FormLabel>
    </GridItem>

    <GridItem xs={12} sm={3}>
        <CustomInput
            formControlProps={{
              fullWidth: true
            }}
        />
    </GridItem>     
</GridContainer>

Примечание: у меня около 20 меток для каждого входа, и он использует один и тот же компонент (некоторые из них не были), но возможно ли сократить использование кодов, чтобы мои коды выглядели более чистый.

Answer 1

Вы можете попробовать создать пользовательский компонент, такой как

function MyCustomComponent({ label }) {
  <Fragment>
    <GridItem xs={12} sm={2}>
      <FormLabel className={classes.labelHorizontal}>{label}</FormLabel>
    </GridItem>

    <GridItem xs={12} sm={3}>
      <CustomInput
        formControlProps={{
          fullWidth: true,
        }}
      />
    </GridItem>
  </Fragment>;
}

А затем используйте его как:

<GridContainer>
  <MyCustomComponent label="User ID"/>
  <MyCustomComponent label="Full Name"/>
<GridContainer>