Строка шаблона React intl выдает предупреждение о пропущенном идентификаторе

Я пытаюсь ввести некоторые значения в переведенное предложение через react-intl. Следуя официальной документации, я смог определить некоторое шаблонное сообщение в свой файл локализации, и оно выглядит так.

ratingMsgTemplate: {
    id: "_ratingMsg",
    defaultMessage: "{pointCount, plural, one {{point}} other {{points}}}"
},

это поле передается непосредственно внутри объекта локализации.

чем я использую пользовательский компонент Plural, который очень прост

import * as React from "react";

import { injectIntl } from "react-intl";
import { inject, observer } from "mobx-react";

const i18nPluralNumber = (props: any) => {
    const { locale, intl, msgId, ...msgParams } = props;
    let finalMessage;

    if (!(msgId in locale.messages)) {
        console.warn("Id not found in i18n messages list: " + msgId);
        finalMessage = msgId;
    } else {
        finalMessage = locale.messages[msgId];
    }

    return (
        <span className = "plural-number-intl">
            {intl.formatMessage(finalMessage, { ...msgParams })}
        </span>
    );
};

export default inject("locale")(injectIntl(observer(i18nPluralNumber)));

вот пример использования

    <I18nPluralNumber
                msgId = "ratingMsgTemplate"
                pointCount = {shopPoints}
                point = {formatMessage("point")}
                points = {formatMessage("points")}
            />

Это работает как шарм Кроме эта надоедливая штука. В консоли я получаю это сообщение: I18nPluralNumber.tsx:19 [React Intl] Отсутствует сообщение: «_ratingMsg» для локали: «de», с использованием сообщения по умолчанию в качестве запасного варианта.

и это правильно, потому что в моем файле перевода нет идентификатора _ratingMsg. На самом деле я добавил этот идентификатор только потому, что это необходимо в соответствии с документами react-intl, и без этого идентификатора он вообще не работает.

Может ли кто-нибудь дать совет / совет, как управлять этим материалом? Буду признателен за любую информацию.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
673
1

Ответы 1

Если кому поможет. Я не нашел нормального решения, кроме этого костыля. Я добавил идентификатор с этим ключом и продублировал defaultMessage для каждого из них.

например

ratingMsgTemplate: {
    id: "_ratingMsg",
    defaultMessage: "{pointCount, plural, one {{point}} other {{points}}}"
},

Я просто создаю идентификатор - _ratingMsg со значением defaultMessage

_ratingMsg: "{pointCount, plural, one {{point}} other {{points}}}",
ratingMsgTemplate: {
    id: "_ratingMsg",
    defaultMessage: "{pointCount, plural, one {{point}} other {{points}}}"
},

теперь он не выдает предупреждение о пропущенном идентификаторе и работает как строка шаблона.

Странно, но я не нашел лучшего решения

Другие вопросы по теме