1

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

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

export default function ContextualComponent() {

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

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

1 回答 1

3

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

于 2020-10-04T23:32:58.377 回答