Next.js项目中NextUI Tooltip不渲染且出现Ref警告问题求助

问题原因 #

NextUI的Tooltip组件内部需要获取子元素的DOM ref来实现定位、触发显示等逻辑，但你传入的AiOutlineEdit是react-icons提供的函数组件，默认没有通过React.forwardRef()转发ref，导致Tooltip尝试给它绑定ref时失败，触发控制台警告，同时也会干扰Tooltip的正常功能，导致showArrow、placement等props不生效。

解决方案 #

方案1：用原生DOM元素包裹图标 #

把图标放在<span>、<button>这类原生DOM元素里，原生元素可以直接接收ref，Tooltip就能正常工作：

import { Tooltip } from "@nextui-org/tooltip";
import { AiOutlineEdit } from "react-icons/ai";

export const SomeComponent = () => {
  const userCanEdit = true; // 假设这是你已定义的变量

  return (
    <Tooltip 
      showArrow={true} 
      placement="bottom" 
      content={`${userCanEdit ? 'Rename file' : 'Cannot Rename File'}`}
    >
      <span style={{ cursor: userCanEdit ? 'pointer' : 'not-allowed' }}>
        <AiOutlineEdit size={18} />
      </span>
    </Tooltip>
  );
}

方案2：用React.forwardRef包装图标组件 #

如果不想额外添加DOM元素，可以手动用React.forwardRef()包装图标组件，转发ref给内部的图标元素：

import { Tooltip } from "@nextui-org/tooltip";
import { AiOutlineEdit } from "react-icons/ai";
import React from "react";

// 包装图标组件，转发ref
const ForwardedEditIcon = React.forwardRef((props, ref) => {
  return <AiOutlineEdit ref={ref} {...props} />;
});

export const SomeComponent = () => {
  const userCanEdit = true;

  return (
    <Tooltip 
      showArrow={true} 
      placement="bottom" 
      content={`${userCanEdit ? 'Rename file' : 'Cannot Rename File'}`}
    >
      <ForwardedEditIcon size={18} />
    </Tooltip>
  );
}

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