在不使用Preact标记的情况下在Preact中呈现原始HTML？

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

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