Reactjs OverlayTrigger-在StrictMode中不推荐使用findDOMNode

我正在使用react引导中的工具提示覆盖，但在StrictMode中不推荐使用获取错误findDOMNode。正如使用OverlyTrigger的函数形式避免了React.findDOMNode调用一样，对于那些试图严格遵守模式的人，我仍然得到如下错误

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference.
in div (created by Tooltip)
in Tooltip (at NavMenu.tsx:31)
in Transition (created by Fade)
in Fade (created by Overlay)
in Overlay (created by Overlay)
in Overlay (created by OverlayTrigger)
in OverlayTrigger (at NavMenu.tsx:28)
in div (created by ForwardRef)
in ForwardRef (created by Nav)
in Nav (at NavMenu.tsx:27)
in div (created by Context.Consumer)
in Transition (created by ForwardRef)
in ForwardRef (created by Context.Consumer)
in NavbarCollapse (at NavMenu.tsx:23)
in nav (created by Navbar)
in Navbar (at NavMenu.tsx:18)
in StrictMode (at src/index.tsx:13)

覆盖式起重器代码

<OverLayTrigger 
     key="left" 
     placement="left" 
     overlay={<Tooltip id="tooltip-initials">{`Logged in as ${this.context.user?.name}`}</Tooltip>}>

{
    ({ref, ...triggerHandler}) => (
        <div className="avatar-circle" {...triggerHandler} >
            <span className="initials" id="initials" ref={ref}>
                {`${this.context.user?.given_name.substring(0,1)}${this.context.user?.family_name.substring(0,1)}`}
            </span>
        </div>
    )
}
</OverLayTrigger>

{
（{ref，…triggerHandler}）=>(
{`${this.context.user？.given_name.substring（0,1）}${this.context.user？.family_name.substring（0,1）}}
)
}

---

您能告诉我上面缺少了什么吗？

在这个问题上让我挠头了一会儿，但看起来您必须将过渡道具设置为false。如果仍然需要过渡动画，可以在应用程序的根目录下添加一些css：

。工具提示{
过渡：不透明度0.15s线性；
}

这对我来说很有效，同时使用了您描述的OverlyTrigger函数形式。让我知道它是否适合你

编辑：这将允许工具提示在进入时淡入淡出，但在退出时不淡出。为了实现这一点，我在覆盖和工具提示组件周围制作了一个包装组件，允许组件在淡出之前保持存在：

    interface ITooltipWrapperProps {
      tooltipContent: string;
      tooltipId: string;
      children: ReactElement;
      placement: Placement;
    }
    
    const TooltipWrapper: FC<ITooltipWrapperProps> = (props) => {
      let target = useRef(null);
      let [show, setShow] = useState(false);
      let [exist, setExist] = useState(false);
    
      const onMouseEnter = () => {
        setExist(true);
        setShow(true);
      };
    
      const onMouseLeave = () => {
        setShow(false);
        setTimeout(() => {
          setExist(false);
        }, 150);
      };
    
      return (
        <>
          {cloneElement(props.children, {
            ref: target,
            onMouseEnter: onMouseEnter,
            onMouseLeave: onMouseLeave,
          })}
          <Overlay
            placement={props.placement}
            transition={false}
            show={exist}
            target={target.current}
          >
            {(injectedProps) => (
              <Tooltip
                id={props.tooltipId}
                className={show ? "show" : ""}
                {...injectedProps}
              >
                {props.tooltipContent}
              </Tooltip>
            )}
          </Overlay>
        </>
      );
    };

接口ITOLTIPWrapperProps{
tooltipContent:字符串；
工具提示：字符串；
儿童：反应元素；
安置：安置；
}
常量工具提示包装器：FC=（道具）=>{
让target=useRef（null）；
let[show，setShow]=useState（false）；
let[exist，setExist]=useState（false）；
const onmouseinter=（）=>{
setExist（true）；
设置显示（正确）；
};
const onMouseLeave=（）=>{
设置显示（假）；
设置超时（（）=>{
setExist（false）；
}, 150);
};
返回(
{cloneElement（道具、儿童、{
参考：目标，
onMouseCenter:onMouseCenter，
onMouseLeave:onMouseLeave，
})}
{（injectedProps）=>(
{props.tooltipContent}
)}
);
};

感谢您提供示例代码。