在打字稿中将字符串解析为 HTML

Question

我正在使用打字稿。

我有一个名为 Reason 的对象，如下所示。我已将对象中的所有变量定义为字符串。 （值、显示、数据类型和标签为字符串）

    Reason = {
            value: '<ul><li>list item 1</li><li>list item 2</li></ul>',
            display: '<ul><li>list item 1</li><li>list item 2</li></ul>', 
            dataType: 'string', 
            label: 'Reason'}

我想在 div 或 span 标签中显示它。

    <div> {Reason.value} </div>

它没有显示为

• 列出项目 1
• 列出项目 2

而是将其打印为<ul><li>list item 1</li><li>list item 2</li></ul> 的字符串

请告诉我如何解析此文本以将其显示在列表元素而不是文本中。

Answer 1

当您执行 {Reason.value} 时，它假定 Reason.value 是文本，因此它会转义您正在使用的所有 HTML 字符。

要完成您想要的，您需要手动设置 HTML。

您可以使用dangerouslySetInnerHtml 做出反应 - 这会使您容易受到 XSS 攻击。

<div dangerouslySetInnerHTML={{ __html: Reason.value }}></div>