Question

此代码有效：

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）

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

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

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

[物体对象]（10）

请帮忙。

Answer 1

查看此link以获取更多信息。

邮件格式回退   消息格式化API可以为格式化失败的常见情况提供额外的回报;至少应该总是返回一个非空字符串。这是消息格式化后备算法：

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


回退以格式化defaultMessage。

在id的来源处回复已翻译的邮件。

回退到defaultMessage源。

回退到文字消息ID。

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

您的消息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)

如何使用EL表达式处理/连接react-intl消息？

1 个答案:

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