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

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

P.S。导航时看不到错误，因为导航时页面没有在服务器上呈现，都是front-end :)

Answer 2

您应该将 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>

Answer 3

如果您使用任何服务器端渲染（如 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 4

如果您正在使用 NEXTJS，这可能是一个不错的方法，您可以查看文档 here as well, also if you are working with data-event, globalEventOff or any other prop and is not hiding or not working in your localhost, this only occurs in Development Strict Mode. ReactTooltip works fine in Production code with React 18. So you can set reactStrictMode : false, in your next.config.js to test it locally and then set it back to true, hope this helps :) info reference 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

React-tooltip 和 Next.js SSR 问题

React-tooltip and Next.js SSR issue

css

reactjs

server-side-rendering

next.js