如何为react-intl中defaultMessage的部分内容设置样式？

react-intl 默认不会解析 defaultMessage 中的 HTML 标签（会转义为纯文本），也不支持直接在消息字符串里内嵌样式，需要通过插值传递带样式的 React 元素来实现部分文本加粗的需求，具体有两种常用方式：

方式一：使用 <FormattedMessage> 组件（推荐） #

先调整你的消息定义，把需要加粗的占位符命名更清晰：

import { defineMessages } from 'react-intl';

const messagePath = 'some path';

export default defineMessages({
  discountMessage: {
    defaultMessage: '{boldText} normal text',
    id: `${messagePath}.thisMessage`,
  },
});

然后在组件中使用 <FormattedMessage>，通过 values 属性传入带加粗样式的 React 元素：

import { FormattedMessage } from 'react-intl';
import messages from './your-messages-file';

function DiscountComponent() {
  const textToBold = '需要加粗的文本';
  
  return (
    <FormattedMessage
      {...messages.discountMessage}
      values={{
        boldText: <strong>{textToBold}</strong>
        // 也可以用 inline style：
        // boldText: <span style={{ fontWeight: 'bold' }}>{textToBold}</span>
      }}
    />
  );
}

方式二：使用 useIntl Hook 手动格式化 #

如果需要在非 JSX 场景或自定义逻辑中处理，可以用 useIntl 的 formatMessage 方法，同样传递 React 元素作为插值：

import { useIntl } from 'react-intl';
import messages from './your-messages-file';

function DiscountComponent() {
  const intl = useIntl();
  const textToBold = '需要加粗的文本';
  
  const formattedMessage = intl.formatMessage(messages.discountMessage, {
    boldText: <strong>{textToBold}</strong>
  });
  
  return <div>{formattedMessage}</div>;
}

注意事项 #

• 不要直接在 defaultMessage 中写 <b>{Text_to_be_bold}</b>，react-intl 会将 HTML 标签转义为纯文本显示，无法达到样式效果。
• 这种插值方式不仅支持加粗，还可以扩展到其他样式（比如颜色、字号）或自定义组件，只需传递对应的 React 元素即可。

内容的提问来源于stack exchange，提问作者Hayder Alraeai