[英]`className` did not match. Server:
I am using NextJS getServerSideProps to fetch data and the page is rendering correctly with the data.我正在使用 NextJS getServerSideProps 来获取数据,并且页面使用数据正确呈现。 So this works fine except when rendering a dynamic classname property on a html element I am getting the following error:
所以这工作正常,除非在 html 元素上呈现动态类名属性时,我收到以下错误:
Prop `className` did not match. Server: "" Client: "dark"
when rendering the following component:渲染以下组件时:
function Header(props: { darkMode: boolean }) {
const [darkMode, setDarkMode] = useState(props.darkMode);
return (
<div className={(darkMode ? "dark" : "")}></div>
);
}
export default Header;
When debugging I can see that darkMode is true but the div element is still rendered without the className, assuming it's due to the error descriped above.调试时,我可以看到 darkMode 为 true,但 div 元素仍然在没有 className 的情况下呈现,假设它是由于上面描述的错误造成的。
I am actually using MaterialUI although this element is not an materialUI element.我实际上使用的是 MaterialUI,虽然这个元素不是一个 materialUI 元素。
I have specified.bablerc like this:我已经像这样指定了.bablerc:
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true }]]
}
Any idea why I am getting this error?知道为什么我会收到此错误吗?
It seem like the issue is the same as the one mentioned here .似乎问题与此处提到的问题相同。 If that's the case, I have posted the answer there
如果是这样的话,我已经在那里发布了答案
The className
mismatch is related to how React syncs up the DOM node after a page is server-side rendered. className
不匹配与 React 在服务器端渲染页面后如何同步 DOM 节点有关。 Since React will only patch/sync the text context for the node and className
is an attribute.因为 React 只会修补/同步节点的文本上下文,而
className
是一个属性。 A warning is triggered.触发警告。
Reference参考
https://github.com/facebook/react/issues/11128#issuecomment-334882514 https://github.com/facebook/react/issues/11128#issuecomment-334882514
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.