0

我们已经开始使用这个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 一起使用。或者，如果上述方法是这样做的正确方法？

4

2 回答 2

4

这通常是使用 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 语言环境属性，并<LocaleProvider>根据来自 Redux 的字符串 id 提供正确的语言环境对象。

这是一些（未经测试的）代码，我从具有类似结构的项目中提取并适应了 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>
        );
    }
}
于 2017-05-21T19:40:02.857 回答
1

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

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

  1. 一周应该从星期一开始

  2. 日期从 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;
于 2021-04-19T04:55:52.523 回答