[英]How to insert HTML tag with injectIntl formatMessage using React-Intl?
I have a react-intl package issue. 我有一个react-intl包问题。 I am using an injectIntl way to use props in the component.
我正在使用injectIntl方法在组件中使用props。 Pure String is fine, but it will not work if I wrapped the HTML tag.
Pure String很好,但是如果我包装HTML标签,它将无法工作。
Pure String Success Case 纯字串成功案例
const _tableNoText = intl.formatMessage(
{ id: 'footer.table_no' },
{ value: basket.table }
);
//console -> Table 1
Pure String with HTML Tag Fail Case 带有HTML标记失败案例的纯字符串
const _tableNoText = intl.formatMessage(
{ id: 'footer.table_no' },
{ value: <b>basket.table</b> }
);
// console -> Table [object object]
If I change the formatMessage
to formatHTMLMessage
, it will output the same above result, how should I fix that? 如果我将
formatMessage
更改为formatHTMLMessage
,它将输出相同的上述结果,我该如何解决?
Thanks all very much. 非常感谢。
When you're using { value: <b>basket.table</b> }
you're in fact creating React component b
which is an ordinary JavaScript object. 当你使用
{ value: <b>basket.table</b> }
你实际上正在创建一个普通的JavaScript对象React组件b
。 This step is just hidden from you by tsx
(or jsx
) compiler. tsx
(或jsx
)编译器对您隐藏此步骤。
So if you want to render HTML you have to wrap the actual HTML string with quotes, then translate the string and then let React unwrap (or turn) the HTML string into DOM elements. 因此,如果要渲染HTML,则必须使用引号包装实际的HTML字符串,然后翻译字符串,然后让React将HTML字符串展开(或转换)为DOM元素。
const translated = intl.formatMessage(
{ id: 'footer.table_no' },
{ value: '<strong>STRONG</strong>' }
);
return (
<div dangerouslySetInnerHTML={{__html: translated}} />
)
If you want to interpolate basket.table
just pass it as another value: 如果你想插入
basket.table
只需将其作为另一个值传递:
...
{
value: '<strong>STRONG</strong>',
table: basket.table,
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.