reactjs - 将 createContextualFragment 与 JSX 一起使用

Question

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

请注意，我需要运行脚本，因此不提供危险的 SetInnerHTML 选项。另外我想构建一个函数组件以与钩子一起使用。

export default function ContextualComponent() {

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

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

标签： reactjsjsxdangerouslysetinnerhtml

Answer 1

对于与 DOM 的任何直接交互，您需要一个 React ref。你想要的可以用useRefand来实现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 演示