如何在react-intl中为href显示翻译结果并实现电话链接？

我来帮你搞定这两个问题，咱们一步步梳理：

1. 如何在react-intl中为href属性显示翻译结果 #

你现在直接用messages.phone赋值给href是错误的，因为messages里的内容是翻译键对应的配置对象（比如包含id、defaultMessage这些字段），并不是实际的翻译后文本。要拿到翻译后的字符串，你需要使用useIntl钩子提供的formatMessage方法，而不是直接取messages里的对象。

2. 能否渲染指定格式的tel链接？ #

当然可以！只要正确获取到翻译后的电话号码，拼接成tel:开头的href即可，同时能给a标签加上你需要的类名。

修改后的完整代码示例 #

import React from 'react';
import { FormattedMessage, useIntl } from 'react-intl'; // 引入useIntl钩子
import messages from './messages';

const ContactList = () => {
  const intl = useIntl();
  // 用formatMessage获取翻译后的电话号码字符串
  const translatedPhone = intl.formatMessage(messages.phone);

  return (
    <div className="footer__links--contact">
      {/* 这里可以查看翻译后的实际号码 */}
      <pre>{translatedPhone}</pre>
      {/* 正确拼接tel链接，同时添加指定类名 */}
      <a className="footer__links--contact--phone" href={`tel:${translatedPhone.replace(/\s/g, '')}`}>
        <FormattedMessage {...messages.phone} />
        <p className="footer__opening-hours">
          <FormattedMessage {...messages.availability} />
        </p>
      </a>
    </div>
  );
};

export default ContactList;

关键说明 #

• useIntl钩子：这是react-intl提供的核心钩子，用来获取格式化方法，formatMessage可以把messages里的配置对象转换成实际的翻译文本。
• 处理电话号码空格：如果翻译后的号码包含空格（比如+44 1234 1234 12），建议用replace(/\s/g, '')去掉空格，虽然浏览器也能识别带空格的tel链接，但去掉空格能让链接格式更标准稳妥。
• 保持FormattedMessage显示文本：链接内部的显示文本依然用FormattedMessage，这样前端显示的是带格式的号码（比如带空格），而href里的是标准的tel格式，兼顾显示和功能。

原代码出错的原因 #

你之前直接用messages.phone，它实际上是一个类似这样的对象：

{
  id: 'contact.phone',
  defaultMessage: '+44 1234 1234 12'
}

把这个对象直接拼到tel:后面，会变成tel:[object Object]，这就是你截图里出现的错误（从截图中的tel:[object Object]能明显看出来）。

内容的提问来源于stack exchange，提问作者Mo.