javascript - 在 Preact 中渲染原始 HTML 而不使用 Preact 标记？

Question

Preact 标记为 8.5kb，是 Preact 大小的一半。有没有一种方法可以渲染原始 HTML 而无需解析它？

我能想到的一种方法是渲染一个占位符，然后使用innerHTML替换componentDidMount或componentDidUpdate中的占位符，但是有吗一种不那么老套的方式？

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 注入(inject)攻击。因此得名dangerouslySetInnerHTML。

免责声明:我在 Preact 上工作。