时间戳

首页 > 解决方案 > 如何使用 React-Intl 插入带有 injectIntl​​ formatMessage 的 HTML 标记？

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

问题描述

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

非常感谢大家。

标签： javascriptreactjsreact-intl

解决方案

当您使用时，{ 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,
}

推荐阅读