Antd区域设置未定义
我正在尝试添加一个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中，所以我在<head>中使用了<script>标记
<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>;它可以工作，我的应用程序被翻译了。但我不喜欢“导入风格”的混合。
所以，我的问题是:我做错了什么？为什么第一种方法不起作用？这是因为我的webpack配置的外部添加了antd吗?如果是，我如何解决这个问题？
回答 4
Stack Overflow用户
发布于 2017-08-07 23:51:55
可能与webpack和打字有关？
以下是解决此问题的方法：
// 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'));Stack Overflow用户
发布于 2017-06-22 05:49:25
@Silox，这是我的整个客户端/main.js：
import React from 'react';
import ReactDOM from 'react-dom';
import LocaleProvider from 'antd/lib/locale-provider';
import enUS from 'antd/lib/locale-provider/en_US';
import App from '/imports/components/app.js';
ReactDOM.render(
<LocaleProvider locale={enUS}>
<App />
</LocaleProvider>,
document.getElementById('container')
);这可以在不使用中文字形的情况下正常工作并正确呈现。
FWIW，在线文档对我来说是有问题的，因为它有太多的中文。使用RTFC和./node_modules/antd/dist中的.md文件时，我的运气要好一点。
Stack Overflow用户
发布于 2018-01-23 15:02:33
这对我很有效。
import LocaleProvider from 'antd/lib/locale-provider';
import enUS from 'antd/lib/locale-provider/en_US';
const { Content, Footer } = Layout;
const component = ({ children }) => (
<LocaleProvider locale={enUS}>
<Layout>
<div>Hello work</div>
</Layout>
</LocaleProvider>
);https://stackoverflow.com/questions/44522693
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号