是否有可能在水合物上跳过与服务器渲染不同的一些dom节点做出反应。

Question

如果我的服务器组件例如：

class Test extends React.Component { 
...
render() {
return <React.Fragment>
    <div> {this.props.server_data} </div>
    <div onClick={make_this_div_update_on_client}> 
         {this.state.client_staff}
    </div>
    </React.Fragment >
   }
}

在服务器上，我将使用客户端上不可用的道具进行渲染

ReactDOMServer.renderToString(<Test server_data="Hello from server!" />)

但是当我使用以下方法为应用程序补水时，在前端

ReactDOM.hydrate(<Test />, document.querySelector(".app"));

它更新此DOM节点，因为this.props.server_data为空。

我该如何做出反应以不接触服务器上创建的某些DOM节点，而只会使树的其他部分水化？这种行为可能吗？

例如这样的东西：

class Test extends React.Component { 
...
render() {
return <React.Fragment>
    <div donTouchThisOnClient> {this.props.server_data} </div>
    <div onClick={make_this_div_update_on_client}> 
      {this.state.client_staff} 
    </div>
    </React.Fragment >
   }
}