[英]How can I formatMessage with a tags (links) using react-intl?
I need to add links to the text I need translated.我需要添加指向我需要翻译的文本的链接。 How can I formatMessages that have links?
如何格式化具有链接的消息?
Right now this is what I am trying to do:现在这就是我想要做的:
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',
},
});
Then, in the render function:然后,在渲染函数中:
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>
This doesn't work.这不起作用。 I get: By clicking the "Place Order" button, you confirm that you have read, understood, and accept our [object Object], [object Object], and [object Object].
我得到:通过单击“下订单”按钮,您确认您已阅读、理解并接受我们的[对象对象]、[对象对象]和[对象对象]。
What is the correct way to accomplish this task?完成这项任务的正确方法是什么?
First, it depends on your react-intl version.首先,这取决于您的 react-intl 版本。 I've made it work using
react-intl v2.x
(2.8 to be exact).我已经使用
react-intl v2.x
(准确地说是 2.8)让它工作了。 Here's how I did:这是我的做法:
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>
),
}}
/>
For newer react-intl
version, you can find your answer in the docs:对于较新的
react-intl
版本,您可以在文档中找到答案:
v3.x: https://formatjs.io/docs/react-intl/upgrade-guide-3x#enhanced-formattedmessage--formatmessage-rich-text-formatting 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 v4.x: https : //formatjs.io/docs/react-intl/api/#formatmessage
Can you use the FormattedHTMLMessage
component? 您可以使用
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} />
}
} />
<FormattedMessage
id="footer.table_no"
defaultMessage="Hello {link}"
values={{ link: <a href="www.google.com">World</a> }}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.