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

enUSただし、これは機能しませんundefined。Antd ライブラリ全体を my にバンドルしたくないため、webpack 構成で 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 のドキュメントに記載されている 2 番目のアプローチを試すと、次のようになります。

const { LocaleProvider, locales } = window.antd;

...

return <LocaleProvider locale={locales.en_US}><App /></LocaleProvider>;

それは機能し、私のアプリケーションは翻訳されています。しかし、私は「インポート スタイル」の混合が好きではありません。

だから、私の質問は次のとおりです。私は何を間違っていますか? 最初の方法が機能しないのはなぜですか? antdこれは私の webpack 設定の外部に追加するためですか?もしそうなら、どうすればこれを解決できますか?

4

4 に答える 4

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 に答える