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

Question

我正在尝试使用DatePickerMUI 版本 5 中的组件。我已完全按照MUI 文档的codesandbox 示例中指定的方式将其包含在内。所以我的组件看起来像这样：

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 无法识别renderInputDOM 元素上的 prop。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写renderinput。

如果我用小写写，那么代码甚至不会呈现。我在这里做错了什么？

Answer 1

这是 MUI 的一个错误，当你打开MonthPicker. renderInput这是因为他们忘记在将其余 props 传递给 DOM 元素之前过滤回调。

你可以从源代码中看到，YearPicker没有这个问题，因为它手动传递每个道具，而MonthPicker选择传播剩余的道具，其中包括renderInput- 这是一个无效的道具，因为 HTML 属性不知道有关 JS 回调的任何信息目的。

这个错误只是 ReactJS 认为你做错了什么时发出的警告，但你不是，因为这是一个上游错误，并且它不会影响任何其他功能，所以忽略它。