有啥方法可以避免在 s-s-r 中使用 React 出现“文本内容不匹配”警告？

Posted 2023-02-22

【中文标题】有啥方法可以避免在 s-s-r 中使用 React 出现“文本内容不匹配”警告？

【英文标题】：Is there any way to avoid "Text content did not match" warning in s-s-r with React?有什么方法可以避免在 s-s-r 中使用 React 出现“文本内容不匹配”警告？

【发布时间】：2019-05-26 08:42:23

【问题描述】：

我已经用 webpack 和 HMR 搭建了一个 s-s-r 环境。有一个静态渲染的标记，该服务器传递给客户端和一个带有ReactDOM.hydrate() 方法的client.js 捆绑包。如果我更改我的源代码，HMR 可以正常工作，但会在控制台中发出警告，指出客户端代码和静态标记之间不匹配。

我正在使用带有webpack-dev-middleware 和webpack-hot-middleware 的快速服务器

我的 webpack 配置如下所示：

module.exports = 
  mode: 'development',
  entry: ['webpack-hot-middleware/client', './src/client.js'],
  devServer: 
    hot: true,
    publicPath: '/'
  ,
  plugins: [new HotModuleReplacementPlugin()],
  module: 
    rules: [ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader' ]
  ,
  resolve: 
    extensions: ['.js', '.jsx']
  ,
  output: 
    filename: 'client.js',
    path: path.resolve(__dirname)
  
;

我想知道是否有任何方法可以解决这个问题，因为我想不出任何想法来让我的标记与我所做的更改相匹配，或者我应该只是取消这些警告？

【参考方案1】：

如果 suppressHydrationWarning 不起作用（例如，您想更深层次地抑制水合警告），您可以尝试在水合之前手动删除 DOM 内容。

const rootId = 'app'
const root = document.getElementById(vueRootId)
root.innerhtml = ''
// Your hydration code
// ...

请参阅Remove all child elements of a DOM node in javascript 了解删除 DOM 元素的子元素的替代方法。

【参考方案2】：

如果你将 suppressHydrationWarning 设置为 true，React 不会警告你该元素的属性和内容不匹配。它只工作一层深，旨在用作逃生舱口。

<MyComponent suppressHydrationWarning />

更多信息https://reactjs.org/docs/dom-elements.html#suppresshydrationwarning