React-tooltip和Next.js SSR问题

Question

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

我注意到每当我在访问使用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}
/>

- Damian Kociszewski

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

- Niv Apo

Answer 2

我也遇到了相同的问题，不得不使用状态来检测组件何时被挂载，并在此之后才显示工具提示。

P.S. 当你导航时，你看不到错误，因为页面在导航时没有在服务器端渲染，它完全是前端的 :)

- lemurry

---

@lemurry，你能提供一下示例代码吗？你是如何检测组件是否已挂载的呢？ - Fabian Bosler

你可以使用useState和useEffect，在第一次渲染时执行。这个链接是代码示例：https://codesandbox.io/s/brave-rosalind-4bb4v?file=/src/App.js 如果你需要更进一步的解释，请告诉我。 - lemurry

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>

- AmerllicA

---

这是更干净的解决方案，具有可重用组件，应该被接受作为答案。 - sagat

Answer 4

如果你正在使用NEXTJS，这可能是一种好的方法，你可以查看文档here。如果你在使用data-event、globalEventOff或任何其他属性，并且它没有在本地隐藏或不起作用，这只会在Development Strict Mode中发生。ReactTooltip在React 18的生产代码中工作正常。因此，您可以在您的next.config.js中设置reactStrictMode : false,来在本地测试它，然后将其设置回true，希望这能帮到你:) 参考信息here

import dynamic from 'next/dynamic'

const ReactTooltip = dynamic(() => import('react-tooltip'), { ssr : false });

function Home() {
  return (
    <div>
     <Button
      data-tip
      data-event="click focus"
      data-for="toolTip"
      onClick={():void => ()}
     />
     <ReactTooltip id="toolTip" globalEventOff="click"/>
    </div>
  )
}

export default Home

- Erikson Lizandro