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;

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

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

1 个答案: