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

Question

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

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

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

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

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