24 lines
794 B
JavaScript
24 lines
794 B
JavaScript
import { createElement as h } from 'react';
|
|
|
|
/**
|
|
* Astro passes `children` as a string of HTML, so we need
|
|
* a wrapper `div` to render that content as VNodes.
|
|
*
|
|
* As a bonus, we can signal to React that this subtree is
|
|
* entirely static and will never change via `shouldComponentUpdate`.
|
|
*/
|
|
const StaticHtml = ({ value }) => {
|
|
if (!value) return null;
|
|
return h('astro-fragment', { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: value } });
|
|
};
|
|
|
|
/**
|
|
* This tells React to opt-out of re-rendering this subtree,
|
|
* In addition to being a performance optimization,
|
|
* this also allows other frameworks to attach to `children`.
|
|
*
|
|
* See https://preactjs.com/guide/v8/external-dom-mutations
|
|
*/
|
|
StaticHtml.shouldComponentUpdate = () => false;
|
|
|
|
export default StaticHtml;
|