我正在尝试将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库声明为外部因为我不想在我的app.js中捆绑整个Antd库，所以我在<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和打字稿有关？
以下是它的解决方法：
// 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'));
@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文件运气好一点。
这对我有用。
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>
);
我花了两个多小时才让它在我这边工作。除了js导入之外，我必须配置webpack以减小捆绑包的大小，否则它会花费所有时间本地化。
import React from 'react'
import ReactDOM from 'react-dom'
import {ConnectedRouter} from 'react-router-redux'
import {LocaleProvider} from 'antd'
import {Provider} from 'react-redux'
import configureStore from 'store'
import createHistory from 'history/createBrowserHistory'
import ruRU from 'antd/lib/locale-provider/ru_RU'
import App from 'containers/App'
const history = createHistory()
const store = configureStore(history)
const MOUNT_NODE = document.getElementById(`root`)
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<LocaleProvider locale={ruRU}>
<App/>
</LocaleProvider>
</ConnectedRouter>
</Provider>,
MOUNT_NODE
)
的WebPack：
...
plugins: [
new ExtractTextPlugin({
filename: `[name].css`,
disable: false,
allChunks: true
}),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /ru/)
],
resolve: {
modules: [`client`, `node_modules`],
extensions: [`.js`, `.jsx`],
mainFields: [
`browser`,
`jsnext:main`,
`main`
],
alias: {moment: `moment/moment.js`}
}
...
.babelc
plugins": [
"flow-react-proptypes",
"styled-components",
["import", {"libraryName": "antd", "style": "css"}]
]