Reactjs 防止React重新渲染水合物上的部分SSR含量

如何防止SSR内容在

React.hydrate（…）

上的客户端浏览器中重新呈现

我的工作流程 在我当前的项目中，我在构建过程中通过

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;

这是

ReactDomServer.renderToString（…）

创建的内容：

<span th:text="#{general.hello_world}">general.hello_world</span>

如何防止上述

组件的
React.hydrate（…）
上的初始渲染？
如@estus所述，解决了此问题

我创建了一个稍微复杂一些的示例来重现给定的建议：

多姆

这是SSR内容
当前时间：2019-01-27T08:00:00.000Z

来自Thymeleaf（SSR）的Hello World


反应
类CsrComponent扩展了React.Component{
状态={currentTime:”“}；
componentDidMount=（）=>{
设置间隔（（）=>{
this.setState（{currentTime:new Date（）.toISOString（）}）；
}, 1000);
};
render（）{
返回当前时间：{this.state.currentTime}
；
}
}
类SsrComponent扩展了React.Component{
render（）{
返回(

);
}
}
类应用程序扩展了React.Component{
render（）{
返回(
这是SSR内容
);
}
}

保湿
const rootElement=document.getElementById（“根”）；
ReactDOM.hydroge（
你检查过类似的相关问题吗？我已经遇到了这个@estus。给出的建议在我当前的项目中对我不起作用。但是我创建了另一个小示例，给出的建议按照描述起作用。我当前的项目中一定有其他错误：）正如@estus报告的那样，解决了这个问题。我创建了一个稍微复杂一些的示例来重现给定的建议：
<span th:text="#{general.hello_world}">general.hello_world</span>

<span>Hello World!</span>

<span th:text="#{general.hello_world}">general.hello_world</span>

<div id="root">
  <div class="App">
    <h1>THIS IS SSR CONTENT</h1>
    <p>Current Time: 2019-01-27T08:00:00.000Z</p>
    <p>Hello World from Thymeleaf (SSR)</p>
  </div>
</div>

class CsrComponent extends React.Component {
  state = { currentTime: "" };

  componentDidMount = () => {
    setInterval(() => {
      this.setState({ currentTime: new Date().toISOString() });
    }, 1000);
  };

  render() {
    return <p>Current Time: {this.state.currentTime}</p>;
  }
}

class SsrComponent extends React.Component {
  render() {
    return (
      <p
        dangerouslySetInnerHTML={{ __html: "" }}
        suppressHydrationWarning
        {...{ "th:text": `#{${this.props.i18n}}` }}
      />
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h1>THIS IS SSR CONTENT</h1>
        <CsrComponent />
        <SsrComponent i18n="general.hello_world" />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.hydrate(<App />, rootElement);