Разобрать строку как HTML в машинописи

Question

Я использую машинопись.

У меня есть объект Reason, как показано ниже.я определил все переменные в объекте как строку.(значение, отображение, dataType и метка в виде строки)

    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>