将 createContextualFragment 与 JSX 一起使用答案

【问题标题】：Using createContextualFragment with JSX将 createContextualFragment 与 JSX 一起使用
【发布时间】：2021-01-19 20:29:37
【问题描述】：

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

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

export default function ContextualComponent() {

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

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

【问题讨论】：

可能不想用dangerouslySetInnerHTML 标记它，这不是一个选项;)
大声笑我在想知道危险SetInnerHTML的人对这件事很熟悉:-)
DocumentFragments 要求使用appendChild 将节点附加到真实文档树中。如何与 React 一起工作是一个很好的问题......我怀疑你需要逃离 React 并在这里使用 vanilla js
@Dominik 我害怕那个。我想知道 React ref 是否可以在这里提供帮助。

标签： reactjs jsx dangerouslysetinnerhtml

【解决方案1】：

对于与 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

【讨论】：

太棒了！正如我上面评论的那样，我尝试了 ref 但无法弄清楚正确的实现。谢谢。