React-Intl同时使用多个语言环境

Question

我的用例是，我有一个react应用程序，它需要本地化为特定的ui语言-比方说德语。对于数字和日期时间格式，我们有另一种语言设置，这可能与ui语言不同。因此，让我们假设这种文化是en-US。

我设置了IntlProvider。

<IntlProvider messages={messages[language]} locale={language} defaultLocale="en">
        <NumberFormatCultureContextProvider value={timeFormatLanguage}>{children}</NumberFormatCultureContextProvider>
</IntlProvider>

并为第二种语言创建了一个自定义的React.Context ...

import React from "react";
import { assertNotUndefined } from "./Assertions";

const NumberFormatCultureContext = React.createContext<string>("en");

export function useDateTimeCulture(): string {
    return assertNotUndefined(React.useContext(NumberFormatCultureContext), "Missing 'NumberFormatCultureContext'");
}

export const NumberFormatCultureContextProvider = NumberFormatCultureContext.Provider;

在子组件中，我想这样做：

    const intl = useIntl();

    const dateTimeCulture = useDateTimeCulture();

    const getDateTimeFormatted = (date:Date) {
        return intl.formatDate(date, locale: dateTimeCulture);
    }

但是在intl.formatDate Api中没有区域设置的选项吗？

我如何实现这一点-在React Intl中同时使用两个地区？

Answer 1

如果有人跟进的话...我的解决方案如下……

    const uiLanguage: string = user.profile.ui_culture ?? "en";

    const numberFormatLanguage: string = user.profile.culture ?? "en";

    const getMessageLanguage = () => {
        if (uiLanguage === "de") return "de";
        return "en";
    };

    return (
        <IntlProvider messages={messages[getMessageLanguage()]} locale={numberFormatLanguage}>
            {children}
        </IntlProvider>
    );

有了这些，您就有了本地化的消息，并且对于所有其他intl调用(例如，格式化的日期)，将采用其他语言环境。