React intl - создание ввода, для которого требуется перевод атрибута заполнителя.

const Input = props => (
  <InputWrapper
    skew={props.skew}
  >
    <InputElement
      skew={props.skew}
      placeholder={props.placeholder}
      type={props.type}
    />
  </InputWrapper>
);

Я пытаюсь найти в Интернете пример, объясняющий, как я использую компонент <FormattedMessage id="" defaultMessage="" /> для заполнителей. У нас есть файлы JSON, в которых мы устанавливаем для них разные языки. Итак, в качестве примера, который у меня выше, идентификатор должен указывать на файл json, а затем на этот объект, чтобы выбрать правильное значение для языка. Таким образом, у нас будет несколько файлов json для каждого языка.

Как бы мы это сделали для атрибута-заполнителя, поскольку вместо этого мне нужно вернуть строку.

0
0
805
1

Ответы 1

Если я правильно предполагаю:

  • У вас есть переводы в файле JSON.
  • id указывает перевод
  • Вы хотите использовать переведенное сообщение как свойство defaultMessage компонента FormattedMessage

Если это неверно, прокомментируйте. Если это правильно, я бы:

  • Создайте функцию в каком-нибудь файле утилиты, которая получит перевод
  • Создайте пользовательский компонент, который обертывает компонент FormattedMessage.

В каком-то файле util.jsx:

const getTranslationFromId(id) = (id) => {
    // Get translation from JSON file here!
    const translatedMessage = ...; 

    return translatedMessage;
}

В FormattedTranslatedMessage.jsx:

import React from "react";
import {getTranslationFromId} from "../some/path/to/utils";

const FormattedTranslatedMessage = ({id, ...restProps}) => (
    <FormattedMessage defaultMessage={getTranslationFromId(id)} {...restProps} />
);

export default FormattedTranslatedMessage;

Прокомментируйте, если мои предложения неверны, или я мог бы улучшить ответ ...

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