React Intl - 创建需要翻译占位符属性的输入答案

【问题标题】：React Intl - Creating an input that needs a placeholder attribute to be translatedReact Intl - 创建需要翻译占位符属性的输入
【发布时间】：2018-08-10 14:56:56
【问题描述】：

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 文件。

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

【问题讨论】：

标签： reactjs formatmessage

【解决方案1】：

如果我猜对了：

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

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

在某个 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;

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

【讨论】：