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

问题描述：

我需要添加链接到我需要翻译的文本。我如何formatMessages有链接？如何使用react-intl格式化标记（链接）？

眼下这就是我想要做的事：

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>

这是行不通的。我得到：通过单击“下订单”按钮，确认您已阅读，理解并接受我们的[对象对象]，[对象对象]和[对象对象]。

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

它看起来像截至目前，这是不支持的。 https://github.com/yahoo/react-intl/issues/137 –

答

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} /> 
    } 
} />

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

相关推荐