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

Question

我有一个 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，它会输出与上述相同的结果，我应该如何解决这个问题？

非常感谢。

Answer 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,
}