如何在 intl.formatMessage 中使用占位符

Posted 2023-02-19

【中文标题】如何在 intl.formatMessage 中使用占位符

【英文标题】：How to use placeholder with intl.formatMessage

【发布时间】：2018-10-13 13:34:50

【问题描述】：

我正在尝试使用 react-intl 将本地化添加到我的应用程序中。像这样

<FormattedhtmlMessage id="marker.title" values=
        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,
    />

但我需要一个字符串，所以我尝试了这个

const title = this.props.intl.formatMessage(
    id: "marker.title",
    values: 
        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,
    
);

我收到以下错误消息：

Error: The intl string context variable 'name' was not provided to the string 'name<br/>Seats: seats<br/>Material: material<br/>Color: color<br/>Location: lat / lng'

en.json

  "marker.title": "name<br/>Seats: seats<br/>Material: material<br/>Color: color<br/>Location: lat / lng"

【参考方案1】：

如果你这样做，它会起作用

this.props.intl.formatMessage(id: "marker.title", 
                name: (b.name !== null ? b.name : "Bench"),
                seats: Tools.showValue(b.seats, this.props.intl),
                material: Tools.showValue(b.material, this.props.intl),
                color: Tools.getColorNameFromInt(b.color, this.props.intl),
                lat: b.lat,
                lng: b.lng,
            );

希望当我再次陷入这个问题时，我能再次找到这个答案。