javascript - Ant Design SSR 不匹配问题，服务端呈现中文，客户端呈现英文

Question

我将 Ant Design 添加到了我的 React/Redux SSR 就绪应用程序中。正如文档中所述，我使用了 Ant Design 的 Locale Provider 组件。但有两个主要问题。

1. 在网络控制台中，它显示；组件在服务器端呈现中文，但在客户端呈现英文。所以SSR不兼容。我尝试了一些网络配置，但没有解决问题。
2. 它说；您使用的是antd整包，请使用https://www.npmjs.com/package/babel-plugin-import减少应用程序包的大小。我使用了 babel-plugin-import 插件，但没有改变任何东西。

任何建议我都会感激不尽。

Answer 1

首先，您必须使用 ant design “LocaleProvider” 组件，如文档中所述。

import { LocaleProvider } from 'antd';
import enUS from 'antd/lib/locale-provider/en_US';

return <LocaleProvider locale={enUS}><App /></LocaleProvider>;

然后要支持服务器端渲染，您必须对 server.js 文件使用相同的模式

const { LocaleProvider } = require('antd')
const enUS = require('antd/lib/locale-provider/en_US')

const body = ReactDOMServer.renderToString(
React.createElement(
  LocaleProvider,
  { locale: enUS },
  React.createElement(
    Provider,
    { store },
    React.createElement(
      StaticRouter,
      { location: req.url, context: context },
        React.createElement(Layout, null, React.createElement(Routes))
      )
    )
  )
)