Question

我有一个字符串文字，我用React应用程序中的数据填充。字符串文字将保存到localStorage中，以后再检索。

字符串文字-

 const newDOM = `<div>${Name} <br/>
                    ${Address} <br />
                    ${City} ${State} ${Postal}</div>`;

当我在这里检索

this.innerHTML = localStorage.getItem('Tom-Hanks-Address')

它仍然插入到引号中的DOM中，但div不会呈现为HTML。

这是DOM-

<div id="Address" class="address-check">"<div>Tom Hank's <br/>
                    123 Hanks Dr. <br/>
                    Pensacola FL 444444</div>"
</div>

Answer 1

当尝试在React中更新innerHTML时，您必须使用危险的SetInnerHTML属性

function createMarkup() {
  return {__html: '<strong>First Second</strong>'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

演示在这里 https://jsbin.com/matigijosa/edit?html,js,output

Answer 2

尝试在香草JS中将字符串解析为html：

const parser = new DOMParser();
const htmlDoc = parser.parseFromString(localStorage.getItem('Tom-Hanks-Address'), 'text/html');
this.innerHTML = htmlDoc.body.innerText;

参考：https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

将字符串输出为innerHTML，但不会呈现为HTML

2 个答案: