如何在React.hydrate(...)
期间防止SSR内容在客户端浏览器中重新渲染?
我的工作流程
在我的当前项目中,我通过ReactDomServer.renderToString(...)
在构建过程中呈现了一堆React组件。这个呈现的结果将被用作Thymeleaf片段。SSR DOM包含多个th:text
属性以进行国际化:
简单示例
这是我的组件:
import React from "react";
class WdbThym extends React.Component {
constructor(props) {
super(props);
}
shouldComponentUpdate() {
return false;
};
render() {
return (
<span {...{ 'th:text': `#{${this.props.i18n}}` }}>
{this.props.i18n}
</span>
);
}
}
export default WdbThym;
这是使用
WdbThym
的示例用法:<WdbThym i18n="general.hello_world" />
这是
ReactDomServer.renderToString(...)
创建的内容:<span th:text="#{general.hello_world}">general.hello_world</span>
这是Thymeleaf渲染并发送给客户端的内容:
<span>Hello World!</span>
这是
React.hydrate
渲染的内容:<span th:text="#{general.hello_world}">general.hello_world</span>
我该如何防止上述的
Component
在React.hydrate(...)
时进行初始渲染?