react-intlを使用してタグ（リンク）でメッセージをフォーマットするにはどうすればよいですか？

Question

私は翻訳が必要なテキストへのリンクを追加する必要があります。リンクを持つメッセージをどのようにフォーマットできますか？

は今のところ、これは私がしようとしているものです。そして、

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> 

。私は： ボタンをクリックすると、[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、および[オブジェクトオブジェクト]を読み、理解し、受け入れたことを確認します。

このタスクを実行する正しい方法は何ですか？

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