时间戳

首页 > 解决方案 > 如何重构常见的 React 组件？

reactjs - 如何重构常见的 React 组件？

问题描述

我正在设计这样的必需品 TextField 

const styles = theme => ({
  labelAsterisk: {
    color: "red"
  },
  cssLabel: {
    color: "orange"
  },
  cssRequired: {
    "&:before": {
      borderBottom: "2px solid orange"
    }
  },
});


    <TextField
      id="requiredField"
      label="Required Field"
      value="Custom Text"
      required
      InputLabelProps={{
        classes: {
          root: classes.cssLabel
        },
        FormLabelClasses: {
          asterisk: classes.labelAsterisk
        }
      }}
      InputProps={{
        classes: {
          underline: classes.cssRequired
        }
      }}
      margin="normal"
    />

我的表单中有很多这些必填字段，并且希望将其标准化，而不是复制和粘贴大块代码。

重构它的最佳方法是什么，以便我只需要指定id，label并且value每次使用它？

我要延长TextField吗？

创建一个扩展的新组件React.Component？

使用函数还是常数？

标签： reactjsrefactoringmaterial-ui

解决方案

以下是定义自定义 TextField 组件的方式：

const RequiredTextField = ({id, label, value}) => (
  <TextField
    id={id}
    label={label}
    value={value}
    required
    InputLabelProps={{
      classes: {
        root: classes.cssLabel
      },
      FormLabelClasses: {
        asterisk: classes.labelAsterisk
      }
    }}
    InputProps={{
      classes: {
        underline: classes.cssRequired
      }
    }}
    margin="normal"
  />
)

以下是您将如何使用它：

<RequiredTextField id="some-id" label="some-label" value="some-value">

推荐阅读