reactjs - 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 文件，我们在其中设置了不同的语言来指向它。因此，作为我上面的示例，ID 将指向 json 文件，然后指向该对象以选择正确的语言值。因此，每种语言都有多个 json 文件。

我们将如何为占位符属性执行此操作，因为我需要返回一个字符串。

Answer 1

如果我假设正确：

• JSON您在文件中有翻译。
• 指定id翻译
• 您想将翻译后的消息用作组件的defaultMessage属性FormattedMessage

如果这不正确，请发表评论。如果它是正确的，我会：

• 在一些 util 文件中创建一个函数来获取我的翻译
• 创建一个包装组件的自定义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;

如果我的建议是错误的，请发表评论，或者我可以改进答案...