不使用 Preact Markup 在 Preact 中呈现原始 HTML？

Question

Preact标记语言的大小为8.5kb，是Preact大小的一半。有没有一种不需要解析就可以呈现原始HTML的方法？

我能想到的一种方法是在componentDidMount或componentDidUpdate中呈现一个占位符，然后使用innerHTML替换占位符，但是否有更好的方法？

- Leo Jiang

---

preact-X有dangerouslySetInnerHTML。 - pmkro

Answer 1

正如@pmkro在评论中提到的那样，您可以使用dangerouslySetInnerHTML来呈现原始HTML字符串。

import { h, render } from "preact";

const vnode = <div dangerouslySetInnerHTML={{
  __html: "<span>foobar</span>"
}} />

render(vnode, document.getElementById("app"));
// renders <div><span>foobar</span></div>

警告：您必须确保最终出现在 dangerouslySetInnerHTML 中的字符串已经被正确转义，否则您将会为自己（以及您的用户）打开 XSS 注入攻击的大门。因此才有了 dangerouslySetInnerHTML 的名称。

声明：我是 Preact 的工作人员。

- marvinhagemeister

---

这样的攻击是否也对来自可信来源的数据构成威胁？ 需要转义什么内容？ - user10695266

Answer 2

如果大小是问题，为什么不使用 https://github.com/developit/htm 呢？在仓库中它说如果与 preact 一起使用，则大小少于500个字节。

- justanotherguy

---

htm不是原始的HTML。相反，它是一种类似于JSX的格式来编写代码而无需转译的方式。它很轻巧，但并不是免费的，也不能避免所提到的解析问题。 - rschristian