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 中同时使用 2 个语言环境？

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>
    );

有了这个，您就可以本地化消息，并且对于所有其他国际电话（例如格式化日期），将采用其他语言环境。

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

React-Intl use multiple locales at the same time

reactjs

react-intl