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

，而是将其打印为{{1 }}

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

Answer 1

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

要完成所需的操作，您需要手动设置HTML。

作为回应，您可以使用dangerouslySetInnerHtml执行此操作-这会使您容易受到XSS攻击。

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

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

1 个答案: