Question

我正在尝试将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库，所以我在{{1}中使用<script>标记}}：

<head>

我的Webpack配置的相关部分：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/2.11.0/antd-with-locales.js"></script>

当我尝试LocaleProvider文档中描述的第二种方法时：

externals: {
    "react": "React",
    "react-dom": "ReactDOM",
    "antd": "antd"
}

它有效并且我的应用程序已翻译。但是我不喜欢＆＃34;导入样式＆＃34;的混合物。

所以，我的问题是：我做错了什么？为什么第一种方法不起作用？这是因为将const { LocaleProvider, locales } = window.antd; ... return <LocaleProvider locale={locales.en_US}><App /></LocaleProvider>;添加到我的webpack配置的外部，如果是这样，我该如何解决？

Answer 1

它可能与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'));

Answer 2

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

Answer 3

这对我有用。

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>
);

Answer 4

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

Antd语言环境未定义

4 个答案: