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

Answer 2

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

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

有关移除 DOM 元素子元素的替代方法，请参阅 Remove all child elements of a DOM node in JavaScript。

有什么方法可以避免在带有React的SSR中出现“文本内容不匹配”警告？

2 个答案: