Question

我们已开始使用此React-Boilerplate。此外，我们正在尝试将Ant Design与其非常棒的组件集成在一起。

从Ant Design的文档中我创建了一个包含React-boilerplate的AppWrapper的包装器 -

import { LocaleProvider } from 'antd';
import enUS from 'antd/lib/locale-provider/en_US'; 
return ( 
<LocaleProvider locale={enUS}> 
<AppWrapper> 
...
</AppWrapper>
</LocaleProvider> 
);

它适用于antd组件。

我想知道如何在i18n of react-boilerplate中使用它。或者，如果以上方式是正确的方法吗？

Answer 1

这通常是使用LocaleProvider的正确方法，是的，但是......

如果您希望将语言更改传播到两者，那么在将i18n librarys包装器与antd的LocaleProvider混合时，您必须要小心。

在React-Boilerplate的情况下，语言环境存储在Redux中。要让antd能够在应用程序执行时更新语言环境，必须在Redux提供程序中插入内部{/ 1}}，否则它将无法访问语言环境状态。

所以你的<LocaleProvider>需要成为：

app.js

不幸的是，这还不够，因为antd的LocaleProvider 不将一个简单的locale id字符串作为其参数，而是一个带有语言环境信息的对象。

这意味着不可能像上面那样在包装链中插入<Provider store={store}> <LanguageProvider messages={messages}> <LocaleProvider locale={...}> <Router ... /> </LocaleProvider> </LanguageProvider> </Provider>,。您必须创建自己的组件，该组件将连接到Redux语言环境，并根据Redux中的字符串ID为<LocaleProvider>提供正确的语言环境对象。

这是一些（未经测试的）代码，我从具有类似结构的项目中删除并适应Intl（它使用的是i18next而不是Intl）。应该让你知道一种方法。

<LocaleProvider>

Answer 2

对我来说，这是因为 localprovider 已弃用，configprovider 被替换为

在下面一段代码中完成的更改

一周应该从星期一开始

天从月变成了月

从 'antd' 导入 { Calendar, ConfigProvider }; 从 'antd/lib/locale-provider/en_GB' 导入 en_GB；从“时刻”导入时刻；导入“时刻/语言环境/en-gb”；从“反应”导入反应；导入'./scheduler.scss';

 const Scheduler = () => {

   moment.locale('en-gb');  // important!
   moment.updateLocale('en', {
     weekdaysMin: ["M", "T", "W", "T", "F", "S", "S"]
   });

   return (
     <div class='scheduler-dashboard'>
       <ConfigProvider locale={en_GB}>
         <Calendar
         />
       </ConfigProvider >
     </div>
   );
 };

 export default Scheduler;

如何将Ant设计LocaleProvider与React-Boilerplate一起使用

2 个答案: