如何使用React将数据插入影子dom？

问题描述

我正在尝试使用React将数据插入影子dom。

下面的代码曾经可以工作，但是当将“无关”更改为其他代码时，它停止工作。我认为问题在于该组件现在（与以前相比）仅运行一次。在此运行中，shadowHost为null，因此没有附加shadowRoot。

什么是使这项工作合理的方法？

import React,{ useRef } from "react";

export enum ViewerStyle {
  Svg = "svg",ProcessedSvg = "processedsvg",}

type Props = {
  serialized: string;
  viewerStyleModifier: ViewerStyle;
};

export default function SvgImageViewer(props: Props) {
  const { serialized,viewerStyleModifier: xmlType } = props;

  if (!serialized) {
    return <div className={`viewer viewer--${xmlType}`}></div>;
  }

  const shadowHost = useRef<HTMLDivElement>(null);

  let shadowRoot: ShadowRoot | null = null;
  if (shadowHost.current instanceof HTMLElement && !shadowHost.current.shadowRoot) {
    shadowRoot = shadowHost.current.attachShadow({ mode: "open" });
  }

  if (shadowRoot instanceof ShadowRoot) {
    shadowRoot.innerHTML = `
      <div class="viewer viewer--${xmlType}">
        ${serialized}
      </div>
    `;
  }

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

解决方法

您应该创建一个效果（在安装组件时运行）以将数据插入到影子根目录中。效果应依靠serialized来运行（这意味着serialized更改其值时，效果就会运行并用新的serialized值替换影子根）

  export default function SvgImageViewer(props: Props) {
  const { serialized,viewerStyleModifier: xmlType } = props;
  const shadowHost = useRef<HTMLDivElement>(null);
  
  React.useEffect(() => {
     if (serialized) {
        const shadowRoot = shadowHost.current.attachShadow({mode: "open"});
        shadowRoot.innerHTML = `
          <div class="viewer viewer--${xmlType}">
            ${serialized}
          </div>`;
     }

  },[serialized])
  
  if (!serialized) {
    return <div className={`viewer viewer--${xmlType}`}></div>;
  }

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

,

解决此问题的一种方法是更改​​

  if (!serialized) {
    return <div className={`viewer viewer--${xmlType}`}></div>;
  }

到

  if (!serialized) {
    return <div ref={shadowHost} className={`viewer viewer--${xmlType}`}></div>;
  }

如果您将ref对象传递给React with，则只要该节点发生更改，React就会将其.current属性设置为相应的DOM节点。 （https://reactjs.org/docs/hooks-reference.html#useref）

但是，这仍然依赖于至少在组件序列化之前渲染一次。