Блог

Я использую повторно используемое текстовое поле в пользовательском интерфейсе Material в React, и у меня возникла проблема с использованием условия. Мне не нужно использовать InputLabelProps , если оно не передается ему.

Пожалуйста, проверьте мое повторно используемое текстовое поле ниже

     <TextField
      fullWidth
      type={prop.type}
      label={prop.label}
      name={prop.name}
      variant="outlined"
      value={prop.value}
      onChange={prop.handleChange}
      onBlur={prop.onBlur}
      helperText={prop.helperText}
      error={prop.error}
     {prop.InputLabelProps ? InputLabelProps={{
        shrink: prop.InputLabelProps,
      }} : ''}
    />
  

Просто установите для него значение undefined, если его нет:

 InputLabelProps={prop.InputLabelProps ? { shrink: prop.InputLabelProps } : undefined}.
  

Если вы установите для prop значение undefined в большинстве случаев, оно будет действовать так, как будто вы его вообще не передавали

Вы можете добиться этого, добавив условный оператор перед троичным оператором,

      {prop.InputLabelProps amp;amp; prop.InputLabelProps ? InputLabelProps={{
        shrink: prop.InputLabelProps,
      }} : ''}
  

Интересно, работает ли этот синтаксис. Что вы можете сделать, так это передать неопределенное значение, если ваше условие не соответствует приведенному ниже:

 <TextField
      fullWidth
      type={prop.type}
      label={prop.label}
      name={prop.name}
      variant="outlined"
      value={prop.value}
      onChange={prop.handleChange}
      onBlur={prop.onBlur}
      helperText={prop.helperText}
      error={prop.error}
      InputLabelProps=
      {
        props.InputLabelProps 
        ? { shrink: props.InputLabelProps } 
        : undefined
      }
    />