css - React-tooltip 和 Next.js SSR 问题

标签 css reactjs next.js server-side-rendering

我在 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}
/>

最佳答案

我遇到了同样的问题,我必须使用 state 来检测何时安装了组件,然后才显示工具提示。
附言导航时看不到错误,因为导航时页面未呈现在服务器上,都是前端:)

关于css - React-tooltip 和 Next.js SSR 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64079321/

相关文章:

javascript - Ant Design - 如何在过滤后获取表格行数?

javascript - 在 nextjs 的非 react 组件中获取状态和更新状态

当我将 Next.js 13 og 图像放入应用程序目录时,它不起作用

javascript - Chrome 扩展程序注入(inject)当前标签页

jquery - 如何为不同的设备创建单独的按钮?

html - 在文本下方居中一条小线

reactjs - React Custom Hook with Typescript Type error "Property ' x' 在类型 'interface | (({ target }: any) => void)' .ts(2339) 上不存在"

javascript - react 输入类型编号 onChange 很慢

reactjs - 刷新 firebase id token 服务器端

javascript - 相对布局,移动版显示不正确.. HTML/CSS