如何显示 href 的 react-intl 翻译结果？

Question

是否有任何选项可以在 react-int 中将联系电话显示为 <a class="footer__links--contact--phone" href="tel:+44 1234 1234 12">？

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)}</pre>
        <a className="footer__links--contact--phone" href={`tel:${messages.phone}`}>
          <FormattedMessage {...messages.phone} />
          <p className="footer__opening-hours">
            <FormattedMessage {...messages.availability} />
          </p>
        </a>
      </div>
    );
    export default ContactList;

Answer 1

这条线是否正确显示电话？

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

如果是这样，那么我相信您还必须将相同的逻辑应用于 href 标记，因为模板字符串如何将对象转换为字符串。

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

另外请确保您使用的国际前缀格式正确。 w3 文档中给出的示例使用破折号而不是空格，因此也可能需要考虑这一点。

Answer 2

您可以提供功能作为子组件：

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

如何显示 href 的 react-intl 翻译结果？

How to display react-intl translation result for href?

javascript

translation

jsx

reactjs

react-intl