我正在使用 NextJS getServerSideProps 来获取数据,并且页面正在使用数据正确呈现。所以这很好用,除非在 html 元素上呈现动态类名属性时我收到以下错误:
Prop `className` did not match. Server: "" Client: "dark"
渲染以下组件时:
function Header(props: { darkMode: boolean }) {
const [darkMode, setDarkMode] = useState(props.darkMode);
return (
<div className={(darkMode ? "dark" : "")}></div>
);
}
export default Header;
在调试时,我可以看到 darkMode 为真,但 div 元素仍然在没有 className 的情况下呈现,假设这是由于上面描述的错误造成的。
我实际上使用的是 MaterialUI,尽管该元素不是 materialUI 元素。
我已经像这样指定了 .bablerc:
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true }]]
}
知道为什么我会收到这个错误吗?
答案 0 :(得分:1)
问题似乎与提到的 here 相同。如果是这样,我已经发布了答案 there
className
不匹配与页面在服务器端呈现后 React 如何同步 DOM 节点有关。由于 React 只会修补/同步节点的文本上下文,而 className
是一个属性。触发警告。
参考
https://github.com/facebook/react/issues/11128#issuecomment-334882514