如何使用 react-intl 使用标签（链接）格式化消息？

Posted 2023-02-19

【中文标题】如何使用 react-intl 使用标签（链接）格式化消息？

【英文标题】：How can I formatMessage with a tags (links) using react-intl?

【发布时间】：2017-04-29 00:25:11

【问题描述】：

我需要添加指向我需要翻译的文本的链接。如何格式化有链接的消息？

现在这就是我想要做的：

const messages = defineMessages(
  copy: 
    id: 'checkout.OrderReview.copy',
    description: 'Label for add card button',
    defaultMessage: 'By clicking the "Place Order" button, you confirm that you have read, understood, and accept our termsAndConditionsLink, returnPolicyLink, and privacyPolicyLink.',
  ,
  termsAndConditions: 
    id: 'checkout.OrderReview.termsAndConditions',
    description: 'Label for terms and conditions link',
    defaultMessage: 'Terms and Conditions',
  ,
  returnPolicy: 
    id: 'checkout.OrderReview.returnPolicy',
    description: 'Label for return policy link',
    defaultMessage: 'Return Policy',
  ,
  privacyPolicy: 
    id: 'checkout.OrderReview.privacyPolicy',
    description: 'Label for privacy policy link',
    defaultMessage: 'Privacy Policy',
  ,
);

然后，在渲染函数中：

  const copy = formatMessage(messages.copy, 
    termsAndConditionsLink: <a href="#" className="u-underline text-color-grey">`$formatMessage(messages.termsAndConditions)`</a>,
    returnPolicyLink: <a href="#" className="u-underline text-color-grey">`$formatMessage(messages.returnPolicy)`</a>,
    privacyPolicyLink: <a href="#" className="u-underline text-color-grey">`$formatMessage(messages.privacyPolicy)`</a>,
  );

return <div>  copy  </div>

这不起作用。我得到： 点击“下单”按钮，即表示您确认已阅读、理解并接受我们的[object Object]、[object Object]、[object Object]。

完成这项任务的正确方法是什么？

【问题讨论】：

目前看来这是不支持的。 github.com/yahoo/react-intl/issues/137

【参考方案1】：

Can you use the FormattedhtmlMessage component?

const messages = defineMessages(
  copy: 
    id: 'checkout.OrderReview.copy',
    description: 'Label for add card button',
    defaultMessage: 'By clicking the "Place Order" button, you confirm that you have read, understood, and accept our termsAndConditionsLink, returnPolicyLink, and privacyPolicyLink.',
  ,
  termsAndConditions: 
    id: 'checkout.OrderReview.termsAndConditions',
    defaultMessage: '<a href="/url">Terms and Conditions</a>',
  ,
);

const Component = () => <FormattedHTMLMessage ...
  ...messages.copy,
  values: 
    termsAndConditionsLink: <FormattedHTMLMessage ...messages. termsAndConditions />
  
 />

【参考方案2】：

首先，这取决于您的 react-intl 版本。 我已经使用react-intl v2.x（准确地说是2.8）使它工作。我是这样做的：

const messages = defineMessages(
  copy: 
    id: 'copy',
    defaultMessage: 'Accept our TermsAndConditionsLink',
  ,
  termsAndConditions: 
    id: 'termsAndConditions',
    defaultMessage: 'Terms and conditions',
  ,
  termsAndConditionsUrl: 
    id: 'termsAndConditionsUrl',
    defaultMessage: '/url',
  ,
);

<FormattedMessage
  ...messages.copy
  values=
    TermsAndConditionsLink: (
      <a href=intl.formatMessage(messages.termsAndConditionsUrl)>
        intl.formatMessage(messages.termsAndConditions)
      </a>
    ),
  
/>

---

对于较新的react-intl 版本，您可以在文档中找到答案：

v3.x: https://formatjs.io/docs/react-intl/upgrade-guide-3x#enhanced-formattedmessage--formatmessage-rich-text-formatting

v4.x: https://formatjs.io/docs/react-intl/api/#formatmessage

【讨论】：

作为参考，这是他们将所有内容移出 github 后的最新文档：formatjs.io/docs/react-intl/api#formatmessage

【参考方案3】：

<FormattedMessage 
        id="footer.table_no" 
        defaultMessage="Hello link" 
        values= link: <a href="www.google.com">World</a> 
    />