React-tooltip 和 Next.js SSR 问题

Question

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

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

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

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

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

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） - 您需要确保在显示 react-tooltip 之前先安装您的组件。

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

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

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

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

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

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

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

export default NoSsr;

像这样：

<NoSsr>
 <YourJSX />
</NoSsr>

Answer 3

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

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