在JSX中使用createContextualFragment

问题描述

我试图在JSX中包含一个“上下文组件”，我在做什么错了？

请注意，我需要运行脚本，因此危险地不能选择SetInnerHTML。另外，我想构建一个与挂钩一起使用的功能组件。

export default function ContextualComponent() {

    const node = document.createrange().createContextualFragment("<div>My html and scripts</div>");

    return (
      <div>{node}</div>
    );
}

解决方法

对于与DOM的任何直接交互，您需要一个React ref。所需的内容可以通过useRef和useEffect来实现：

const ContextualComponent = ({ html }) => {
  const ref = useRef(null);

  useEffect(() => {
    const { current } = ref;

    const documentFragment = document
      .createRange()
      .createContextualFragment(html);

    current.appendChild(documentFragment);

    return () => {
      current.textContent = "";
    };
  },[html]);

  return <div ref={ref} />;
};

CodeSandbox demo