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

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

const foo = `<div>foo</div>`;

预期产出：

foo

---

我想你想做的是

const foo = `<div>foo</div>`;
<div dangerouslySetInnerHTML={{ __html: foo }}></div>

constfoo=`foo`；

---

在我看来，有两种方法可以将字符串（不一定是tl）解析为HTML：属性和更强大的方法

演示

var tl=`
`;
document.body.innerHTML=tl；
document.body.insertAdjacentHTML（'afterbegin'，tl）；

您注意到reactjs在这里是一个标记。不要将html指定为字符串，而是将foo设置为功能性的react组件

为此，请确保将import React设置为“React”
然后，将foo设置为功能组件，即：

constfoo=（）=>foo

然后，你可以随意使用它。React组件只是返回jsx的函数（或类）

您的问题是相当开放的，因此您可能正在寻找上述一些答案，但这是一种方法。
如果您想将html字符串显示为html页面，最好这样做：

<text>{{ info | safe }}</text>

{{info | safe}
您是否尝试设置
.innerHTML
？如何设置？您希望html在何处呈现？一分为二？主体？在父divor中，您也可以给div一个id，并在代码中执行此操作，谢谢。我想知道为什么将其呈现为HTML会如此复杂。这不是ES6中字符串模板的主要功能之一吗？@Chuck no:）模板文本与HTML无关，它们只是语言功能。React团队认为这种注入HTML是不安全的，这就是为什么您需要显式使用
DangerouslySetinerHTML
@mast3rd3mon的原因。虽然这是一种普遍有效的HTML案例，但在React中为这种目的添加id是一种不好的做法。您可以添加一个ref，并通过挂接到ref元素来插入此内部组件didmount，或者使用危险的LySetinerHTML，这是首选方法。@VlatkoVlahek啊，我的错，我不知道有什么重大区别，感谢您清除了这一点。我最终使用了一段危险的LysetinerHTML，但很快选择了另一种解决方案，所以我不需要这样的代码。你的答案可能是更好的，因为它看起来是干净的“反应”明智的。
<text>{{ info | safe }}</text>