我正在尝试将 LocaleProvider 添加到我的应用程序中，以将 antd 组件设置为英语(而不是默认的中文)。我按照 https://ant.design/components/locale-provider/ 中的以下说明进行操作:
import { LocaleProvider } from 'antd';
import enUS from 'antd/lib/locale-provider/en_US';
...
return <LocaleProvider locale={enUS}><App /></LocaleProvider>;
但这不起作用:enUS是 undefined 。我已在 webpack 配置中将 Antd 库声明为外部库，因为我不想将整个 Antd 库捆绑在我的 app.js 中。 ，所以我使用 <script>标签 <head> :
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/2.11.0/antd-with-locales.js"></script>
我的 Webpack 配置的相关部分:
externals: {
"react": "React",
"react-dom": "ReactDOM",
"antd": "antd"
}
当我尝试 LocaleProvider 文档中描述的第二种方法时:
const { LocaleProvider, locales } = window.antd;
...
return <LocaleProvider locale={locales.en_US}><App /></LocaleProvider>;
它有效并且我的应用程序已翻译。但我不喜欢“导入风格”的混合。
所以，我的问题是:我做错了什么？为什么第一种方法不起作用？这是因为添加了 antd到我的 webpack 配置的外部，如果是这样，我该如何解决这个问题？
最佳答案
可能与webpack和typescript有关？
以下是解决方法:
// Original code in doc which will not work
//
// import enUS from 'antd/lib/locale-provider/en_US';
// ReactDOM.render(
// (<LocaleProvider locale={enUS}>
// <DatePicker />
// </LocaleProvider>),
// document.getElementById('root'));
//
//
// WORKAROUND (for TypeScript)
//
// import everything instead of the defaults.
import * as enUS from 'antd/lib/locale-provider/en_US';
// cast 'enUS' to 'any' so that it can be passed to LocalProvider
// If you use es6, you probably don't need this
const enUSLocale: any = enUS;
ReactDOM.render(
(<LocaleProvider locale={enUSLocale}>
<DatePicker />
</LocaleProvider>),
document.getElementById('root'));
关于webpack - Antd 语言环境未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44522693/