如何使用 React 将数据插入到 Shadow dom 中？

Question

我正在尝试使用 React 将数据插入到 Shadow 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>;
}

Answer 1

您应该创建一个效果（在安装组件时运行）以将数据插入到影子根中。该效果应依赖于

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>;
}

Answer 2

解决这个问题的一种方法是改变

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

到

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

如果您使用

<div ref={myRef} />

将 ref 对象传递给 React，每当该节点发生更改时，React 都会将其 .current 属性设置为相应的 DOM 节点。 （https://reactjs.org/docs/hooks-reference.html#useref）

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