问题:
使用 style={}
属性对象的空值填充 React 18 应用程序会导致一个水分警告:
function App() {
const style = {
color: "red",
// Empty style value i.e. from conditional assignment.
"--empty-custom-property": "",
};
return <p style={style}>Hello World</p>;
}
重现: https://github.com/nandastone/react-18-19-ssr-empty-style
在上面的示例中,客户端生成一个包含空字符串值属性的样式对象。这与预期的 ReactDOM 行为不匹配,即丢弃具有空值的样式对象属性:
示例: https://codesandbox.io/p/sandbox/objective-tesla-nzsvwz?file=%2Fsrc%2FApp.js%3A8%2C1
原因
问题出在开发模式的水分检查中的一行代码,在 diffHydratedProperties()
时调用:CSSPropertyOperations.js#L33
此检查与正确丢弃具有空值的属性的更严格的 ReactDOM 实现不匹配:dangerousStyleValue.js#L31
解决方案
将 createDangerousStringForStyles()
更新为与 ReactDOM 实现相匹配。这个问题在 React 19 中已经得到解决:CSSPropertyOperations.js#L34。
然而,许多应用程序(包括我的)将在一段时间内使用 React 18,所以解决这个问题是很好的。尽管贡献指南建议所有的 PR 都应该针对 main
,但有没有一种方法可以打开一个针对 v18.3.1 标签的 PR?
React 版本:18.3.1
重现步骤
- 渲染一个带有 style prop 的对象,该对象具有空字符串值的属性。
- 使用 React 18 服务器 API(例如
renderToPipeableStream()
)渲染应用程序。 - 对应用程序进行水分填充。
链接到代码示例:
https://github.com/nandastone/react-18-19-ssr-empty-style - 克隆。
yarn
yarn start
- http://localhost:9000
不幸的是,Codesandbox/Stackblitz 在正确设置 SSR 示例方面变得困难。
当前行为
接收水分警告。
预期行为
不应接收水分警告。
1条答案
按热度按时间crcmnpdw1#
在18.3.1版本中也遇到了这个问题。
会导致SSR错误。