如何将 Ant Design LocaleProvider 与 React-Boilerplate 一起使用答案

【问题标题】：How to use Ant Design LocaleProvider with React-Boilerplate如何将 Ant Design LocaleProvider 与 React-Boilerplate 一起使用
【发布时间】：2017-10-21 07:49:24
【问题描述】：

我们已经开始使用这个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 组件。

我想知道如何将它与 react-boilerplate 的 i18n 一起使用。或者如果上述方法是正确的方法？

【问题讨论】：

标签： reactjs react-boilerplate antd

【解决方案1】：

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

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

一周应该从星期一开始

日期从 Mo 变为 M

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

【讨论】：

【解决方案2】：

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

如果要将语言更改传播到两者，则在将 i18n 库包装器与 antd 的 LocaleProvider 混合时必须小心。

在 React-Boilerplate 的情况下，语言环境存储在 Redux 中。为了让 antd 能够在应用更新语言环境时，<LocaleProvider> 必须插入在 Redux 提供程序中，否则它将无法访问语言环境状态。

所以你的app.js 需要变成这样：

<Provider store={store}>
    <LanguageProvider messages={messages}>
        <LocaleProvider locale={...}>
            <Router ... />
        </LocaleProvider>
    </LanguageProvider>
</Provider>,

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

这意味着不能像上面那样在包装链中插入<LocaleProvider>。您必须创建自己的组件，该组件将连接到 Redux 语言环境属性，并根据来自 Redux 的字符串 id 为 <LocaleProvider> 提供正确的语言环境对象。

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

import React from 'react';
import { Router } from 'react-router';
import { Provider, connect } from 'react-redux';
import en_US from 'antd/lib/locale-provider/en_US';
import sv_SE from 'antd/lib/locale-provider/sv_SE';
import { LocaleProvidern } from 'antd';

class AntDesignPlusRouter extends React.Component {
    state = {
        antd_locale: en_US
    }

    componentWillUpdate( next ) {
        let { locale } = next
        if( !locale || locale === this.props.locale ) return;

        switch( locale ) {
            case 'sv':
                this.setState( { antd_locale: sv_SE } );
                break;
            default:
            case 'en':
                this.setState( { antd_locale: en_US } );
                break;
        }
    }

    render() {
        return (
            <LocaleProvider locale={this.state.antd_locale}>
                <Router {...this.props} />
            </LocaleProvider>
        )
    }
}

const WrappedAntDesignPlusRouter = connect(
        function mapStateToProps( state ) {
            return {
                locale: state.locale
            }
        },
        function mapDispatchToProps( dispatch ) {
            return {}
        }
)( AntDesignPlusRouter );



class App extends React.Component {
    render() {
        return (
                <Provider ...>
                    <LanguageProvider ...>
                        <WrappedAntDesignPlusRouter/>
                    </LanguageProvider >
                </Provider>
        );
    }
}

【讨论】：