如何使用 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,
}