如何使用 React-Intl 插入带有 injectIntl​​ formatMessage 的 HTML 标记？

Posted 2023-02-19

【中文标题】如何使用 React-Intl 插入带有 injectIntl​​ formatMessage 的 HTML 标记？

【英文标题】：How to insert HTML tag with injectIntl formatMessage using React-Intl?

【发布时间】：2019-08-10 17:01:58

【问题描述】：

我有一个 react-intl 包问题。我正在使用 injectIntl​​ 方式在组件中使用道具。纯字符串很好，但是如果我包装了 html 标签，它就不起作用了。

纯字符串成功案例

const _tableNoText = intl.formatMessage(
     id: 'footer.table_no' ,
     value: basket.table 
);
//console -> Table 1

带有 HTML 标签失败案例的纯字符串

const _tableNoText = intl.formatMessage(
     id: 'footer.table_no' ,
     value: <b>basket.table</b> 
);
// console -> Table [object object]

如果我将formatMessage 更改为formatHTMLMessage，它会输出与上述相同的结果，我应该如何解决这个问题？

非常感谢。

【问题讨论】：

你的console.log声明是什么？

@JackBashford 只是 console.log(_tableNoText)

【参考方案1】：

当您使用 value: <b>basket.table</b> 时，您实际上是在创建React 组件b，它是一个普通的javascript 对象。 tsx（或jsx）编译器对您隐藏了这一步。

所以如果你想渲染 HTML，你必须用引号包裹实际的 HTML 字符串，然后翻译字符串，然后让 React 将 HTML 字符串解包（或转换）为 DOM 元素。

const translated = intl.formatMessage(
   id: 'footer.table_no' ,
   value: '<strong>STRONG</strong>' 
);

return (
  <div dangerouslySetInnerHTML=__html: translated />
)

如果您想插入 basket.table，只需将其作为另一个值传递：

...

  value: '<strong>STRONG</strong>',
  table: basket.table,

【讨论】：

谢谢，我就是这样用的，哈哈