reactjs - 如何将 RectIntl​​ 格式化消息添加为 html 属性

Question

我有一个标题徽标图像，应该从 i18n 消息中呈现 alt 和 title 属性。

message_en.json

{
    "logoTitle": "Link open in new tab or window",
    "logoAlt": "some description goes here.." 
}

header.js

import { FormattedMessage } from 'react-intl/dist';

<a
  href={url}
  title={<FormattedMessage id="logoTitle"/>}
> 
  <img
      src={src}
      alt={<FormattedMessage id='logoAlt' />}
  />
</a>

在浏览器中，alt 和 title 呈现为 [Object][Object]

<a title="[object Object]">
    <img id="masthead__logo__img" src="../assets/images/logo.png" alt="[object Object]">
</a>  

在这种情况下如何呈现 FormattedMessage？

标签： reactjsreact-intl

Answer 1

FormattedMessage是一个渲染 HTML 的 React 组件。要呈现纯字符串，请改用intl.formatMessage函数：

title={intl.formatMessage({ id: 'logoTitle' })}