Как мне провести рефакторинг компонентов Common React? - PullRequest
Новая
       10

Как мне провести рефакторинг компонентов Common React?

1 голос
/ 25 апреля 2019

Я оформляю требуется 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?

Использовать функцию или константу?

1 Ответ

3 голосов
/ 25 апреля 2019

Вот как бы вы определили свой пользовательский компонент 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">
...