MUI中<Tooltip>包裹<DatePicker>属性转发错误求助

问题描述 #

• 用MUI的<Tooltip>组件包裹<DatePicker>时，控制台抛出属性转发错误：

  MUI: The children component of the Tooltip is not forwarding its props correctly. Please make sure that props are spread on the same element that the ref is applied to.
  in Tooltip (created by BasicDatePicker)
  in BasicDatePicker

• 在Formik表单中使用时，错误信息变为：

  Warning: Failed prop type: Invalid prop 'children' supplied to 'ForwardRef(Tooltip)'. Expected an element that can hold a ref. Did you accidently use a plain function component for an element instead?

• 替换为<IconButton>组件则无报错，但需求是在DatePicker层级添加Tooltip，而非仅给输入框添加。

解决方案 #

问题核心是DatePicker作为复合组件，默认不会将外部ref转发到底层的可交互输入元素，而Tooltip要求子组件必须是能持有ref的DOM元素或转发ref的组件。可以通过React.forwardRef自定义一个能转发ref的DatePicker组件：

import React from 'react';
import DatePicker from '@mui/x-date-pickers/DatePicker';

// 自定义转发ref的DatePicker组件
const ForwardedDatePicker = React.forwardRef((props, ref) => {
  // 将ref转发到底层的TextField组件
  return <DatePicker {...props} slotProps={{ textField: { ref } }} />;
});

// 使用方式
<Tooltip title="点击选择日期">
  <ForwardedDatePicker label="选择日期" />
</Tooltip>

原理说明 #

• React.forwardRef会将外部传入的ref传递给组件内部指定的元素，这里我们把ref转发给DatePicker底层的TextField组件。
• 这样Tooltip就能正确获取到可交互元素的ref，满足其对子组件的ref转发要求，同时实现了在DatePicker层级添加Tooltip的需求。

其他备选方案 #

如果不想自定义组件，也可以直接在DatePicker的slotProps中给输入框绑定ref，但这种方式本质还是给输入框加Tooltip，和需求的层级略有区别：

<Tooltip title="选择日期">
  <DatePicker 
    label="选择日期" 
    slotProps={{ 
      textField: { 
        ref: (el) => { /* 手动绑定ref */ } 
      } 
    }} 
  />
</Tooltip>

内容的提问来源于stack exchange，提问作者WebDevGuy