Reactjs 如何使用Ant Design LocaleProvider和React样板文件

我们已经开始使用这个。此外，我们正在尝试集成Ant设计，以实现其出色的组件

根据Ant Design的文档，我在React样板的AppWrapper周围创建了一个包装器，如下所示-

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

从'antd'导入{LocaleProvider}；
从“antd/lib/locale provider/en_US”导入enUS；
报税表（
...
);

而且它对antd组件非常有效

---

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

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

如果希望语言更改传播到两者，那么在将i18n Library包装器与antd的LocaleProvider混合使用时一定要小心

对于React样板文件，区域设置存储在Redux中。要使antd能够在应用程序更新语言环境，必须在Redux提供程序中插入

，否则它将无法访问语言环境状态

因此，你的

app.js

需要变成：

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

,

不幸的是，这还不够，因为antd的LocaleProvider不使用简单的LocaleID字符串作为参数，而是使用LocaleInfo本身的对象

这意味着不能像上面那样在包装链中插入

。您必须创建自己的组件，该组件将连接到Redux locale prop，并根据Redux的字符串id为

提供正确的locale对象

下面是一些（未经测试的）代码，这些代码是我从一个具有类似结构的项目中提取出来的，并改编为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>
        );
    }
}

从“React”导入React；
从“react Router”导入{Router}；
从'react redux'导入{Provider，connect}；
从“antd/lib/locale provider/en_US”导入en_US；
从“antd/lib/locale provider/sv_SE”导入sv_SE；
从“antd”导入{LocaleProvidern}；
类AntDesignPlusRouter扩展React.Component{
状态={
antd_地区：en_US
}
组件将更新（下一个）{
设{locale}=next
如果（！locale | | locale===this.props.locale）返回；
开关（区域设置）{
案例“sv”：
this.setState（{antd_locale:sv_SE}）；
打破
违约：
案例“en”：
this.setState（{antd_locale:en_US}）；
打破
}
}
render（）{
返回(
)
}
}
const WrappedAntDesignPlusRouter=连接(
函数MapStateTops（状态）{
返回{
语言环境：state.locale
}
},
功能图DispatchToprops（调度）{
返回{}
}
)（外部）；
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
这通常是使用LocaleProvider的正确方法，是的，但是

如果希望语言更改传播到两者，那么在将i18n Library包装器与antd的LocaleProvider混合使用时一定要小心

对于React样板文件，区域设置存储在Redux中。要使antd能够在应用程序更新语言环境，必须在Redux提供程序中插入
，否则它将无法访问语言环境状态

因此，你的
app.js
需要变成：

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


,

不幸的是，这还不够，因为antd的LocaleProvider不使用简单的LocaleID字符串作为参数，而是使用LocaleInfo本身的对象

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

下面是一些（未经测试的）代码，这些代码是我从一个具有类似结构的项目中提取出来的，并改编为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>
        );
    }
}

从“React”导入React；
从“react Router”导入{Router}；
从'react redux'导入{Provider，connect}；
从“antd/lib/locale provider/en_US”导入en_US；
从“antd/lib/locale provider/sv_SE”导入sv_SE；
从“antd”导入{LocaleProvidern}；
类AntDesignPlusRouter扩展React.Component{
状态={
antd_地区：en_US
}
组件将更新（下一个）{
设{locale}=next
如果（！locale | | locale===this.props.locale）返回；
开关（区域设置）{
案例“sv”：
this.setState（{antd_locale:sv_SE}）；
打破
违约：
案例“en”：
this.setState（{antd_locale:en_US}）；
打破
}
}
render（）{
返回(
)
}
}
const WrappedAntDesignPlusRouter=连接(
函数MapStateTops（状态）{
返回{
语言环境：state.locale
}
},
功能图DispatchToprops（调度）{
返回{}
}
)（外部）；
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
对我来说，这是因为localprovider已被弃用，而configprovider已被替换为

在下面的代码段中所做的更改

一周应该从周一开始


日期从上午改为下午

导入{Calen