React-admin自定义BooleanField时MUI图标Tooltip报错的解决方法

控制台的“函数组件无法接收refs”警告是核心诱因——Tooltip组件需要获取目标元素的DOM ref来计算定位逻辑，而你的自定义函数组件默认不支持接收ref，直接导致Tooltip功能失效。解决思路是用React.forwardRef包裹组件，让它能传递ref到内部的目标元素。

具体修改步骤 #

• 用React.forwardRef重构EventBooleanField组件，让它接收ref参数并传递给内部的BooleanField或图标容器
• 确保Tooltip相关属性（如tooltip）完整传递给底层组件

修改后的代码示例 #

import React, { forwardRef } from 'react';
import { BooleanField } from 'react-admin';
import DoneIcon from '@mui/icons-material/Done';
import ClearIcon from '@mui/icons-material/Clear';

const EventBooleanField = forwardRef((props, ref) => {
  const { tooltip, ...restProps } = props;

  return (
    <BooleanField
      ref={ref}
      tooltip={tooltip}
      {...restProps}
      trueIcon={<DoneIcon style={{ color: '#2ecc71' }} />}
      falseIcon={<ClearIcon style={{ color: '#e74c3c' }} />}
    />
  );
});

export default EventBooleanField;

额外注意事项 #

如果是你自行添加的Tooltip组件（而非BooleanField自带），需将ref传递给Tooltip包裹的目标容器元素，示例如下：

import React, { forwardRef } from 'react';
import { BooleanField } from 'react-admin';
import { Tooltip } from '@mui/material';
import DoneIcon from '@mui/icons-material/Done';
import ClearIcon from '@mui/icons-material/Clear';

const EventBooleanField = forwardRef((props, ref) => {
  const { tooltipText, ...restProps } = props;

  return (
    <Tooltip title={tooltipText}>
      <span ref={ref}>
        <BooleanField
          {...restProps}
          trueIcon={<DoneIcon style={{ color: '#2ecc71' }} />}
          falseIcon={<ClearIcon style={{ color: '#e74c3c' }} />}
        />
      </span>
    </Tooltip>
  );
});

export default EventBooleanField;

完成上述修改后，ref会正确传递到目标元素，Tooltip可正常获取定位信息并显示，同时控制台的ref警告也会消除。

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