OverlayTrigger - findDOMNode 在 StrictMode 中已弃用答案

【问题标题】：OverlayTrigger - findDOMNode is deprecated in StrictModeOverlayTrigger - findDOMNode 在 StrictMode 中已弃用
【发布时间】：2020-11-14 14:38:51
【问题描述】：

我正在使用 react-bootstrap 中的 Tooltip 覆盖，但在 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>

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

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

暂时在这个问题上挠了挠头，但看起来你必须将过渡道具设置为 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>
        </>
      );
    };

【讨论】：