有什么办法可以避免“文本内容不匹配"?使用 React 在 SSR 中发出警告?

问题描述

限时删除！！

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

I have set up a SSR environment with webpack and HMR. There is a statically rendered markup, that server passes to the client and a client.js bundle with ReactDOM.hydrate() method. If I change my source code, HMR works fine, but issues a warning in console, saying that there's a mismatch between client code and static markup.

我正在使用带有 webpack-dev-middleware 和 webpack-hot-middleware

I am using an express server with webpack-dev-middleware and webpack-hot-middleware

我的 webpack 配置如下:

My webpack config looks like this:

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)
  }
};

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

I'm wondering if there is any way to solve this problem, since I can't come up with any ideas of how to make my markup to match the changes that I made, or should I just suppress these warnings?

推荐答案

如果您将 suppressHydrationWarning 设置为 true，React 将不会就该元素的属性和内容不匹配向您发出警告.它只能工作一层，用作逃生舱口.

If you set suppressHydrationWarning to true, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch.

<MyComponent suppressHydrationWarning />

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

这篇关于有什么办法可以避免“文本内容不匹配"?使用 React 在 SSR 中发出警告?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..