javascript - MUI - React 无法识别 Datepicker 中 DOM 元素上的 `renderInput` Prop

Question

我正在尝试使用 DatePicker MUI 版本 5 中的组件。我完全按照 codesandbox example 中指定的方式包含了它。来自 MUI 文档。所以我的组件看起来像这样:

const MonthPicker: FC = () => {
    const [value, setValue] = React.useState<Date | null>(new Date());

    return (
        <LocalizationProvider dateAdapter={AdapterDateFns}>
            <DatePicker
                views={['year', 'month']}
                label="Year and Month"
                minDate={new Date('2012-03-01')}
                maxDate={new Date('2023-06-01')}
                value={value}
                onChange={(newValue) => {
                   setValue(newValue);
                }}
                renderInput={(props) => <TextField  {...props} size='small' helperText={null} />}
            />
        </LocalizationProvider>
    )
}

无论我尝试什么，我总是收到错误消息: React 无法识别 renderInput支持 DOM 元素。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写 renderinput反而。
如果我用小写字母写，那么代码甚至不会呈现。我在这里做错了什么？

Answer 1

这是 MUI 的一个错误，当您打开 MonthPicker 时，您也可以在官方文档中看到它。 .这是因为他们忘记过滤 renderInput在将其余 Prop 传递给 DOM 元素之前回调。

从源码可以看出YearPicker没有这个问题，因为它passes every props down manually ，而 MonthPicker选择spread the remaining props其中包括 renderInput - 这是一个无效的 Prop ，因为 HTML 属性对 JS 回调对象一无所知。
当 ReactJS 认为你做错了什么时，这个错误只是来自 ReactJS 的一个警告，但你并不是因为这是一个上游错误，并且它不会影响任何其他功能，所以忽略它。