Next.js使用React-Intl国际化时遭遇FORMAT_ERROR报错求助

DevOps 小满

2026-6-26

解决React-Intl INVALID_TAG报错及富文本链接展示问题

报错原因

直接在国际化消息字符串中嵌入HTML标签（如<a>）会触发INVALID_TAG错误，因为React-Intl默认不允许这种写法，且会自动转义HTML内容，无法直接渲染可点击的链接。

解决方案

1. 修改国际化资源文件

将消息中的HTML标签替换为占位符，保留变量结构：

{"test.modal.content": "This is {link}."}

2. 组件中使用`<FormattedMessage>`渲染富文本

通过values属性传递React元素作为占位符的内容，实现可点击链接：

import { FormattedMessage } from 'react-intl';

// 假设url是已定义的变量
const YourComponent = ({ url }) => {
  return (
    <FormattedMessage
      id="test.modal.content"
      values={{
        link: <a href={url} target="_blank" rel="noopener noreferrer">link</a>
      }}
    />
  );
};

3. 使用`useIntl` hook的场景（非组件渲染）

如果需要通过formatMessage API处理，可传入带回调的values，再通过React渲染：

import { useIntl } from 'react-intl';

const YourComponent = ({ url }) => {
  const intl = useIntl();
  const messageElements = intl.formatMessage(
    { id: 'test.modal.content' },
    {
      link: (children) => <a href={url}>{children}</a>
    }
  );

  return <span>{messageElements}</span>;
};