Как я могу форматировать сообщение с тегами (ссылками) с помощью реакции-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} /> 
    } 
} />