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

Question

我有一个 react-intl 包问题。我正在使用 injectIntl​​ 方式在组件中使用 Prop 。纯字符串很好，但如果我包装 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,
}