8

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

现在这就是我想要做的：

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】。

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

4

3 回答 3

9

首先，这取决于您的 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

于 2019-10-25T10:16:45.507 回答
1

可以使用FormattedHTMLMessage组件吗？

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} />
  }
} />
于 2016-12-20T14:05:42.940 回答
0 
<FormattedMessage 
        id="footer.table_no" 
        defaultMessage="Hello {link}" 
        values={{ link: <a href="www.google.com">World</a> }}
    />
于 2020-07-17T19:08:51.817 回答