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



最近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属性的值等于false,则InputHelperText不渲染任何内容(在其渲染函数中返回null(。但是,即使我传递了"false",指向底层MaterialUITextFieldheplerText道具的值也从不为null或未定义:它始终是一个InputHelperText组件,它可能会也可能不会呈现某些东西。

MaterialUI TextField组件反过来分析其heplerText道具:

const helperTextId = helperText && id ? `${id}-helper-text` : undefined; // <-- helperText from TextInput
...
{helperText && (
<FormHelperText id={helperTextId} {...FormHelperTextProps}>
{helperText}
</FormHelperText>
)}

由于helperText从不为null或未定义,因此它将始终呈现FormHelperText,可能带有空的helperText

如果我这样更改RATextInput组件的代码:

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

一切都很好:当TextInput组件的helperText道具的值等于false时,helperText(传递给底层MUITextField(的值实际上为null,因此不添加额外的空间。

我是错过了什么,还是真的是个bug?

这是一个功能:

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

一个有问题的特征。

从react admin v4.3(+(开始,将道具helperText={false}传递给<TextInput/>确实会移除额外的空间。

示例:

<TextInput source="meta.og.description" helperText={false} />

相关内容

  • 没有找到相关文章

最新更新