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

【问题标题】：How to render a template string as HTML?如何将模板字符串呈现为 HTML？
【发布时间】：2018-08-30 20:24:16
【问题描述】：

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

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

如何将此模板字符串呈现为 HTML ？如果我执行以下操作，它会将其呈现为纯文本：

return({ foo });

输出：

<div>foo</div>

预期输出：

foo

【问题讨论】：

你试过设置.innerHTML吗？
我该怎么做？
您希望 html 在哪里呈现？在一个div内？身体？
在父 div 中

标签： reactjs ecmascript-6

【解决方案1】：

如果您想将 html 字符串显示为 html 页面，最好这样做：

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

【讨论】：

【解决方案2】：

您在此处将 reactjs 标记为标签。不要将 html 指定为字符串，而是将 foo 设为功能性反应组件。

为此，请确保您拥有import React as 'react';。
然后，将 foo 设置为功能组件，即：

const foo = () => <div>foo</div>;

然后，您可以随心所欲地使用它。 React 组件只是返回 jsx 的函数（或类）。

您的问题相当开放，因此您可能正在寻找上述一些答案，但这是一种方法。

【讨论】：

谢谢。我最终使用了 dangerouslySetInnerHTML 一段时间，但很快选择了另一种解决方案，所以我不需要这样的代码。您的答案可能是更好的答案，因为它看起来很干净“反应”明智。

【解决方案3】：

在我的脑海中，有两种方法可以将字符串（不一定是 tl）解析为 HTML：.innerHTML 属性和更强大的 .insertAdjacentHTML() 方法。

演示

var tl = `
  <video src='http://media6000.dropshots.com/photos/1381926/20170326/005611.mp4' controls width='320'></video>`;
  
document.body.innerHTML = tl;

document.body.insertAdjacentHTML('afterbegin', tl);

【讨论】：

【解决方案4】：

我认为你尝试做的是

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