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

Question

我正在使用 react-bootstrap 中的工具提示覆盖，但在 StrictMode 中不推荐使用错误 findDOMNode。根据 documentation使用overlaytrigger的函数形式避免了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 的代码

<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>

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

Answer 1

在这个问题上抓了一段时间，但看起来您必须将过渡 Prop 设置为 false。如果您仍然想要过渡动画，您可以在应用程序的根目录添加一些 css:

    .tooltip {
        transition: opacity 0.15s linear;
    }

这对我有用，并使用您描述的 OverlayTrigger 的函数形式。请让我知道这对你有没有用!
编辑:事实证明，这将允许工具提示在进入时淡出而不是在退出时淡出，为此，我在 Overlay 和 Tooltip 组件周围制作了一个包装组件，允许该组件保持存在直到它淡出:

    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>
        </>
      );
    };