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

Question

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

下面的代码曾经可以工作，但是当对其他代码进行“不相关”的更改时，它就停止工作了。我认为问题是现在的组件（与以前相比）只有运行s 一次。在此运行 shadowHost 为空，因此未附加 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>;
}

Answer 1

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

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

至

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

If you pass a ref object to React with , React will set its .current property to the corresponding DOM node whenever that node changes. (https://reactjs.org/docs/hooks-reference.html#useref)

然而，这仍然依赖于在序列化之前至少进行一次组件渲染等。

Answer 2

您应该创建一个效果（当组件安装时运行s）以将数据插入影子根。效果应该依赖于 serialized 到运行（这意味着每当 serialized 改变它的值时，效果运行s 并用新的 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>;
}

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

How can I Insert data into a shadow dom using React?

shadow-dom

reactjs