reactjs - React 中的可重用文本字段

Question

我在 React 的 Material UI 中使用了可重用的 TextField，但我在使用条件时遇到了问题。InputLabelProps如果它没有传递给它，我不需要使用它。

请在下面检查我的可重复使用的 TextField

    <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,
      }} : ''}
    />

标签： reactjsmaterial-uireact-hooksreact-material

Answer 1

您可以通过在三元运算符之前添加条件语句来实现此目的，

     {prop.InputLabelProps && prop.InputLabelProps ? InputLabelProps={{
        shrink: prop.InputLabelProps,
      }} : ''}