【问题标题】:i18next-icu is not supporting {{ (double brackets) while translating in reacti18next-icu 在反应中翻译时不支持 {{ (双括号)
【发布时间】:2020-07-17 17:33:40
【问题描述】:

我正在使用非常标准的 facebooks create-react-app 构建一个反应应用程序

我正在使用 i18next 来支持本地化,我也需要复数形式,我正在使用 ICU 来支持复数形式,这里是支持复数形式的 ICU 格式示例。

"VALID_FOR_DAYS": "{count, plural, one{Valid for {count} more day} other{Valid for {count} more days}}",

这是我的 react 项目中的 i18 配置

import i18n from 'i18next';
import I18nextIcu from 'i18next-icu';

const icu = new I18nextIcu();


export const initilizeLocaleSettings = async (defaultLocale: string): Promise<void> => {
       await i18n
        .use(icu)
        .use(initReactI18next)
        .init({
            resources: {
                en: {
                    translation: {
                        WELCOME: 'Welcome {{name}}',
                        VALID_FOR_DAYS": "{count, plural, one{Valid for {count} more day} other{Valid for {count} more days}}",
                    }
                }
            },
            lng: defaultLocale,
            fallbackLng: defaultLocale,
            interpolation: {
                escapeValue: false
            }
        });
};
import { useTranslation } from 'react-i18next';

function App() {
    const { t } = useTranslation();

    return (
        <h1>
            {t('VALID_FOR_DAYS', { count: 10 })}
            {t('WELCOME', { name: 'JOHN DOE' })}
        </h1>
    );
}

复数效果很好 VALID_DAYS 被完美翻译 但是 WELCOME 它不会给我以下错误

SyntaxError: Expected "0", [1-9] or [^ \t\n\r,.+={}#] but "{" found.

【问题讨论】:

    标签: reactjs i18next


    【解决方案1】:

    感谢这是不久前,但你不需要双花括号:

    这个:

    translation: {
                            WELCOME: 'Welcome {{name}}',
                            VALID_FOR_DAYS": "{count, plural, one{Valid for {count} more day} other{Valid for {count} more days}}",
                        }
    

    应该是:

    translation: {
                            WELCOME: 'Welcome {name}',
                            VALID_FOR_DAYS": "{count, plural, one{Valid for {count} more day} other{Valid for {count} more days}}",
                        }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-08-14
      • 1970-01-01
      • 2012-10-27
      • 2015-11-04
      • 1970-01-01
      • 2013-12-05
      相关资源
      最近更新 更多