1

我正在尝试在我的应用程序中添加一个 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>;

然而这不起作用：enUSis 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 配置的外部，如果是这样，我该如何解决这个问题？

4

4 回答 4

3

它可能与 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'));
于 2017-08-07T15:51:54.943 回答
1

@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 文件的运气要好一些。

于 2017-06-21T21:49:25.293 回答
0

我花了两个多小时才让它在我身边工作。除了 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
)

网络包：

...
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"}]
]
于 2018-03-06T19:06:16.553 回答
0

这对我有用。

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>
);
于 2018-01-23T07:02:33.237 回答