Question

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

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

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

return({ foo });

输出：

<div>foo</div>

预期产出：

foo

Answer 1

我认为你尝试做的是

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

Related question.

React documentation.

Answer 2

你在这里注意到reactjs作为标签。不要将html指定为字符串，而是将foo作为功能反应组件。

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

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

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

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

Answer 3

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

演示

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);

Answer 4

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

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

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

4 个答案:

演示