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

Posted 2023-02-22

【中文标题】如何将模板字符串呈现为 HTML？

【英文标题】：How to render a template string as HTML?

【发布时间】：2018-08-30 20:24:16

【问题描述】：

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

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

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

return( foo );

输出：

<div>foo</div>

预期输出：

foo

【问题讨论】：

你试过设置.innerHTML吗？

我该怎么做？

您希望 html 在哪里呈现？在一个div内？身体？

在父 div 中

【参考方案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>

Related question.

React documentation.

【讨论】：

或者你也可以给 div 一个 id 并在后面的代码中这样做

这行得通，谢谢。我想知道为什么将它呈现为 HTML 如此复杂。这不是 ES6 中字符串模板的主要特性之一吗？

@Chuck no no no :) 模板文字与 HTML 无关，它们只是语言特性。 React 团队认为这种注入 HTML 是不安全的，这就是为什么你需要显式使用dangerouslySetInnerHTML。

@mast3rd3mon 虽然这是一个普遍有效的 html 案例，但为此添加 id 在 React 中是一种不好的做法。您可以添加一个 ref，并通过挂钩到 ref 元素将其插入到 ComponentDidMount 中，或者使用作为首选方法的 dangerouslySetInnerHTML。

@VlatkoVlahek 啊，我的错，我不知道存在重大差异，感谢您解决这个问题