时间戳

首页 > 解决方案 > 如何使用 Material UI 重构显示表单的重复代码

reactjs - 如何使用 Material UI 重构显示表单的重复代码

问题描述

我正在使用材料 ui 来设计我的表单。

它工作正常，但我只是想知道是否有任何其他方法可以最大限度地减少代码的使用，因为我只有 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 个标签，并且它使用相同的组件（其中一些不是），但是否可以减少代码的使用，使我的代码看起来更干净。

标签： reactjsmaterial-ui

解决方案

您可以尝试创建一个自定义组件，例如

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>

推荐阅读