最近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",指向底层MaterialUITextField
的heplerText
道具的值也从不为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} />