React Admin Input-components 总是为 helperText 添加一些额外的空间

Posted 2023-02-22

【中文标题】React Admin Input-components 总是为 helperText 添加一些额外的空间

【英文标题】：React Admin Input-components always add some extra space for helperText

【发布时间】：2020-06-09 03:59:40

【问题描述】：

最近 React Admin 输入组件开始在下方添加额外的空间以显示 helperText（如果提供）。但似乎不可能通过添加helperText=false 来避免这种行为，因为它是推荐的，例如：

<TextInput source="myField" helperText=false />

无论我是否将“false”作为值传递给heplerText 属性，它总是显示一些额外的空间。

我现在使用的是 React Admin 版本 3.2.3。

在 RA 的 TextInput 组件中我们可以看到这段代码：

        helperText= // <-- goes to MUI TextField
            <InputHelperText
                touched=touched
                error=error
                helperText=helperText // <-- goes to RA InputHelperText
            />
        

如果InputHelperText 组件的helperText prop 的值等于false，则InputHelperText 不渲染任何内容（在其渲染函数中返回null）。 但是传递给底层 MaterialUI TextField 的 heplerText 属性的值永远不会为 null 或未定义，即使我通过“false”：它始终是一个 InputHelperText 组件，它可能会或可能不会渲染某些东西。

MaterialUI TextField 组件依次分析其heplerText prop：

  const helperTextId = helperText && id ? `$id-helper-text` : undefined; // <-- helperText from TextInput

  ...

  helperText && (
    <FormHelperText id=helperTextId ...FormHelperTextProps>
      helperText
    </FormHelperText>
  )

由于helperText 永远不会为空或未定义，因此它将始终呈现FormHelperText，可能带有一个空的helperText。

如果我像这样更改 RA TextInput 组件的代码：

        helperText=helperText && touched && error ?
            <InputHelperText
              touched=touched
              error=error
              helperText=helperText
            /> : null

一切正常：当TextInput 组件的helperText 属性的值等于 false 时，helperText 的值（传递给底层 MUI TextField）确实为空，因此没有添加额外的空间。

是我遗漏了什么还是确实是一个错误？

【参考方案1】：

这是一个功能：

https://github.com/marmelab/react-admin/pull/4364

一个有问题的功能。

【讨论】：

问题是“heplerText=false”不起作用，上面描述了原因。我的问题不是关于这个“功能”的默认行为，而是关于如何使用“helperText=false”避免它以及它为什么会被破坏。

如果您仔细阅读链接问题中的 cmets，react-admin 的所有者表示：As for disabling helperText if you don't use validation, this is a feature we can add ... 这意味着将来，react-admin 可能会提供您正在寻找的功能将false 发送到helperText 属性。目前，没有办法选择退出此功能，除非如您所演示的那样覆盖 react-admin 核心代码。

如果你仔细阅读this，这个，特别是：we chose to have working features and a less compact ui by default - letting you opting in to a compact UI with helperText=false.并查看源代码，你会发现这个功能已经实现了，这个评论是在你所指的那个。我在原始问题中提到的代码 sn-ps 的目的很明确，但它不起作用。所以我试图了解我做错了什么还是一个错误。