将 createContextualFragment 与 JSX 结合使用

Question

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

请注意，我需要运行的脚本，所以 dangerouslySetInnerHTML 不是一个选项。另外我想构建一个函数组件以与钩子一起使用。

export default function ContextualComponent() {

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

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

Answer 1

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

将 createContextualFragment 与 JSX 结合使用

Using createContextualFragment with JSX

jsx

reactjs

dangerouslysetinnerhtml