reactjs - 有什么办法可以避免使用 React 在 SSR 中出现 "Text content did not match"警告？

Question

我已经使用 webpack 和 HMR 设置了 SSR 环境。有一个静态呈现的标记，该服务器传递给客户端和一个 client.js捆绑 ReactDOM.hydrate()方法。如果我更改我的源代码，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)
  }
};

我想知道是否有任何方法可以解决这个问题，因为我无法想出任何关于如何使标记与我所做的更改相匹配的想法，还是应该取消这些警告？

Answer 1

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

<MyComponent suppressHydrationWarning />

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