reactjs - OverlayTrigger - findDOMNode 在 StrictMode 中已弃用
问题描述
我正在使用 react-bootstrap 中的 Tooltip 覆盖,但在 StrictMode 中不推荐使用 findDOMNode 错误。根据使用 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>
你能告诉我上面缺少什么吗?
解决方案
在这个问题上挠了一阵子,但看起来你必须将转换道具设置为 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>
</>
);
};
推荐阅读
- excel - excel 版本 1908 上缺少过滤器功能
- c++ - 在模板化的 AVL 树中找不到我的错误
- java - 我的程序不断循环并且从不满足要求
- c# - 在能够构建我的应用程序之前,我必须通过包管理器控制台运行“dotnet restore”
- grails - Grails 4 控制器:在 Grails 4 代码中我可以在哪里找到 grails.controllers.defaultScope = 'singleton' 的证明
- c# - 使用 ASP.Net Core 控制台应用程序将文件上传到 OneDrive
- google-chrome - 将数据保存到 Web Worker 中的 chrome 存储?
- pandas - Numpy 扩展中位数实现
- c# - 为什么方法 DrowToBitmap() 在 c# 中质量低
- javascript - 一种如何将 YYYYMM 格式化为 javascript 日期?