React-tooltip 和 Next.js SSR 问题

Question

我在 Next.js 应用程序中使用 react-tooltip 库。

我注意到每次我在访问使用工具提示的页面时刷新网站时都会收到错误消息：

react-dom.development.js:88 Warning: Prop `dangerouslySetInnerHTML` did not match.

CSS 类在客户端和服务器上是不同的

奇怪的是，从随机页面导航到使用 react-tooltip 的页面时，我没有收到该错误。

工具提示相关代码：

<StyledPopularityTooltipIcon src="/icons/tooltip.svg" alt="question mark" data-tip="hello world" />
<ReactTooltip
    effect="solid"
    className="tooltip"
    backgroundColor="#F0F0F0"
    arrowColor="#F0F0F0"
    clickable={true}
/>

Answer 1

如果您使用任何服务器端渲染（如 Next.js） - 您需要确保在显示反应工具提示之前先安装您的组件。

我使用以下方法解决了这个问题：

import React, { useEffect, useState } from 'react';

const [isMounted,setIsMounted] = useState(false); // Need this for the react-tooltip

useEffect(() => {
    setIsMounted(true);
},[]);
 
return (<div>
      {isMounted && <ReactTooltip id={"mytip"} effect={"solid"} />}

      <span data-tip={"Tip Here"} data-for={"mytip"}>Hover me</span>
</div>)

Answer 2

我遇到了同样的问题，我必须使用 state 来检测何时安装了组件，然后才显示工具提示。

PS导航时看不到错误，因为导航时页面没有呈现在服务器上，都是前端的:)

Answer 3

您应该将 JSX 包装在以下组件中：

import React, { useEffect, useState } from 'react';

const NoSsr = ({ children }): JSX.Element => {
  const [isMounted, setMount] = useState(false);

  useEffect(() => {
    setMount(true);
  }, []);

  return <>{isMounted ? children : null}</>;
};

export default NoSsr;

像这样：

<NoSsr>
 <YourJSX />
</NoSsr>