Как вывести результат реакции-intl для href?

Question

Есть ли возможность отобразить контактный номер как <a class="footer__links--contact--phone" href="tel:+44 1234 1234 12"> в Reaction-Int?

<code>import React from 'react';
import { FormattedMessage } from 'react-intl';
import messages from './messages';
    const ContactList = () => (
      <div className="footer__links--contact">
        <pre>{JSON.stringify(messages.phone)}

);экспорт по умолчанию ContactList;

Answer 1

Вы можете предоставить функцию в качестве дочернего компонента:

    <FormattedMessage {...messages.phone}>
       {phone => (
         <a className="footer__links--contact--phone" href={`tel:${phone}`}>
           {phone}
         </a>
       )}
     </FormattedMessage>

Answer 2

Правильно ли отображает эта строка телефон?

<code><pre>{JSON.stringify(messages.phone)}

Если это так, то я считаю, что вам также необходимо применить ту же логику к тегу href из-за того, как строка шаблонапреобразование объекта в строку.

<a className="footer__links--contact--phone" href={`tel:${JSON.stringify(messages.phone)}`}>

Также убедитесь, что вы используете правильный формат для международного префикса.Примеры, приведенные в документах w3 , используют тире вместо пробелов, так что это может быть чем-то, что также следует учитывать.