如何在intl.formatMessage中使用占位符？react-intl本地化开发疑问

嘿，我明白你的需求——原来用FormattedHTMLMessage能正常渲染带动态占位符的本地化文本，现在想通过intl.formatMessage直接拿到字符串结果，对吧？问题出在参数结构上，我给你理清楚：

你之前的写法哪里错了 #

你尝试的代码把values对象放到了formatMessage的第一个参数里，但formatMessage的API要求values是第二个独立参数，不是第一个参数的属性：

// ❌ 错误示范：values不该嵌套在第一个参数对象中
const title = this.props.intl.formatMessage({ 
  id: "marker.title", 
  values: { /* 你的动态值 */ } 
})

正确的写法应该是这样 #

formatMessage的第一个参数只需要传递消息的id（还可以加defaultMessage作为降级备用文本），第二个参数单独传你的占位符值对象：

// ✅ 正确用法：拆分参数
const title = this.props.intl.formatMessage(
  { id: "marker.title" }, // 第一参数：指定消息ID
  { 
    name: b.name !== null ? b.name : "Bench",
    seats: Tools.showValue(b.seats),
    material: Tools.showValue(b.material),
    color: Tools.getColorNameFromInt(b.color),
    lat: b.lat,
    lng: b.lng
  } // 第二参数：占位符对应的动态值
);

额外要注意的点 #

1. HTML标签的处理：如果你的marker.title消息里包含HTML标签，formatMessage会返回带标签的纯字符串，不会自动解析渲染。要是需要渲染这些HTML，得用dangerouslySetInnerHTML：

   <div dangerouslySetInnerHTML={{ __html: title }} />
   

   👉 提醒一下：这个属性名字带“dangerously”不是闹着玩的，一定要确保你的内容是安全的，别引入XSS风险！

2. 确认intl实例能拿到：别忘了你的组件得用injectIntl高阶组件包裹，这样this.props.intl才会存在：

   import { injectIntl } from 'react-intl';
   
   class YourMarkerComponent extends React.Component {
     // ...你的组件逻辑
   }
   
   export default injectIntl(YourMarkerComponent);
   

   要是你用的是函数组件，直接用useIntl钩子更方便：

   import { useIntl } from 'react-intl';
   
   const YourMarkerComponent = () => {
     const intl = useIntl();
     const title = intl.formatMessage({ id: "marker.title" }, { /* 你的values */ });
     // ...
   }
   

这样写出来的title就是你要的带占位符替换的字符串了，和FormattedHTMLMessage渲染的结果完全一致～

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