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

时间:2018-08-10 14:56:57

标签: reactjs formatmessage

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

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

1 个答案:

答案 0 :(得分:0)

如果我正确假设:

  • 您在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;

如果我的建议有误,或者我可以改善答案,请发表评论...