在不使用预先标记的情况下，在preact中呈现RAW HTML

Question

预先标记为8.5kb，是preact的一半。有没有一种方法可以渲染原始的HTML而不必解析？

我能想到的一种方法是渲染一个占位符，然后使用innerHTML在componentDidMount或componentDidUpdate中替换占位符，但是是否有少量黑客的方法？

Answer 1

如@pmkro在评论中提到的那样，您可以使用dangerouslySetInnerHTML渲染RAW 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.

Answer 2

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