如何将模板字符串呈现为HTML?

Chu*_*uck 3 ecmascript-6 reactjs

假设我有一个简单的模板字符串:

const foo = `<div>foo</div>`;
Run Code Online (Sandbox Code Playgroud)

如何将该模板字符串呈现为HTML?如果执行以下操作,它会将其呈现为纯文本:

return({ foo });

输出:

<div>foo</div>
Run Code Online (Sandbox Code Playgroud)

预期产量:

foo
Run Code Online (Sandbox Code Playgroud)

Tom*_*zyk 5

我想你想做的是

const foo = `<div>foo</div>`;
<div dangerouslySetInnerHTML={{ __html: foo }}></div>
Run Code Online (Sandbox Code Playgroud)

相关问题。

反应文档。

  • @ mast3rd3mon虽然这是一个通常有效的html案例,但在React中为此目的添加id是一种不好的做法。您可以添加一个引用,然后通过挂钩到ref元素将此元素插入到ComponentDidMount内,或使用首选方法危险地使用SetInnerHTML。 (2认同)