如何使用 React 将数据插入到影子 dom 中？答案

【问题标题】：How can I Insert data into a shadow dom using React?如何使用 React 将数据插入到影子 dom 中？
【发布时间】：2020-12-02 07:37:31
【问题描述】：

我正在尝试使用 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>;
}

【问题讨论】：

标签： reactjs shadow-dom

【解决方案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>;
}

【讨论】：

感谢您的解决方案！与之前的解决方案相比，使用效果器有什么优势？两者都需要在使用序列化数据呈现组件之前设置 ref。
使用效果来确保当你的组件被挂载到 DOM 时效果会运行（此时 ref 有它的值，因为 ref 是对 DOM 节点的引用）。在您的第一个解决方案中，在第一次渲染时，虽然没有序列化数据，但 div 仍会渲染，因此 ref 具有其价值。在子序列渲染中，多亏了Reconciliation，ref 值保持不变，这就是为什么您的 ref 可以访问并在子序列渲染上按预期工作的原因。如果这解决了您的问题，我们将不胜感激投票或标记答案

【解决方案2】：

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

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

到

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

如果你通过 ref 将 ref 对象传递给 React，React 将在节点发生变化时将其 .current 属性设置为相应的 DOM 节点。 (https://reactjs.org/docs/hooks-reference.html#useref)

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

【讨论】：