0

此代码有效：

import { MessageResource } from 'react-intl'
.
.
.
<FlatButton label={`(${this.props.patCount})`}> {<MessageResource id="T_DUMMY_VALUE_KEY"/>} </FlatButton>

例如：如果<MessageResource id="T_DUMMY_VALUE_KEY"/>给出字符串患者 并${this.props.patCount}给出10，那么标签将变成：

患者 (10)

但我的要求是将所有字符串处理放在标签属性中，如下所示：

    import { MessageResource } from 'react-intl'
    .
    .
    .
    <FlatButton label={<MessageResource id="T_DUMMY_VALUE_KEY"/> + `(${this.props.patCount})`} />

这不起作用，并给我这样的输出：

[对象对象] (10)

请帮忙。

4

1 回答 1

1

检查此链接以获取更多信息。

消息格式化回退 消息格式化 API 更加努力地为格式化失败的常见情况提供回退；至少应始终返回一个非空字符串。这是消息格式回退算法：

在 id 处查找并格式化翻译的消息，传递给 .

  1. 回退到格式化 defaultMessage。
  2. 回退到 id 源的已翻译消息。
  3. 回退到 defaultMessage 源。
  4. 回退到文字消息 ID。

假设您有一条具有 id 的消息： message_one_id 并且您想将第二条消息连接到其中。

如果您有，您的 Messages json 文件如下所示。或者我正在用 defaultMessages 做下面的例子。

{
  message_one_id: "Unread ({loading})",
  loading: "Loading...",
}

您可以使用以下方法：

<FormattedMessage id="message_one_id"
                  defaultMessage="Unread ({loading})"
                  values={{
                           loading: <FormattedMessage 
                                           id="loading"
                                           defaultMessage="Loading..."
                                    />
                         }}
/>

这将输出：

Unread (Loading...)

您甚至可以使用它来动态打印消息：

class NotificationCount extends React.Component {
  constructor(props) {
    this.state = {
                   notification: []
                 };
  }

  componentDidMount() {
    const notifications = [
        {"id": "1", msg: "hello"},
        {"id": "2", msg: "world"}
      ];
    this.setState({notification: notifications});
  }

  render() {
    return (
      <FormattedMessage id="message_one_id"
                        defaultMessage="Unread ({loading})"
                        values={{
                           loading: `${this.state.notification.length}`
                         }}
      />
    );
  }
}

这将输出：

Unread (2)

于 2018-01-05T11:25:54.480 回答