Javascript 组件重新加载时的反应

我正在用我的组件中的一些SVG图标制作一个react应用程序。例如，我有一个搜索栏组件，其中包括输入元素和一个按钮，按钮中有一个搜索图标

通过从单个sprite文件中相应地设置xlinkHref属性，我将所有SVG图标都使用内联SVG

一切似乎都很好，只是当我点击SVG图标时，它们会随机消失。包含图标的按钮元素不会消失，只是SVG图标。我检查了devtools上的DOM树，发现一个名为“#shadow root”的节点似乎有问题

当我的SVG图标可见时，它们将作为“#shadow root”的子节点放置。但是，当它们消失时，DOM树显示“#shadow root”节点不再有任何子节点，从而使我的SVG图标无处可寻

消失前：

消失后：

看到我可爱的SVG图标突然消失真让人心碎

请告知

-----编辑----- 下面是我用来插入SVG图标的组件的代码：

import React from "react";

const Icon = ({ name }) => (
  <svg>
    <use xlinkHref={`img/icons/sprite.svg#icon-${name}`} />
  </svg>
);
export default Icon;

从“React”导入React；
常量图标=（{name}）=>(
);
导出默认图标；

您可以尝试其他方法来包含SVG。我提到三种可能性：

将.svg文件用作img src，如我们在create react应用程序中看到的：

从“/logo.svg”导入徽标；
渲染（）{。。。
...}

使用svg内联反应。有关更多信息，请查看：

import InlineSVG from'svg inline react'；
const svgSource=`您可以自己构建SVG元素。您可以让React生成空的
元素，然后使用ref和effect手动插入
元素：

const Icon = React.memo(({ url }) => {
  const [svgNode, setSvgNode] = React.useState(null);

  React.useLayoutEffect(() => {
    if (svgNode === null) {
      return;
    }

    const useNode = document.createElementNS("http://www.w3.org/2000/svg", "use");
    useNode.setAttributeNS("http://www.w3.org/1999/xlink", "href", url);
    svgNode.appendChild(useNode);

    return () => {
      useNode.remove();
    };
  }, [type, svgNode]);

  return <svg ref={setSvgNode} />;
});

const Icon=React.memo（{url}）=>{
const[svgNode，setSvgNode]=React.useState（null）；
React.useLayoutEffect（（）=>{
if（svgNode==null）{
返回；
}
const useNode=document.createElements（“http://www.w3.org/2000/svg“，”使用“）；
useNode.setAttributeNS（“http://www.w3.org/1999/xlink“，”href“，url）；
appendChild（useNode）；
return（）=>{
useNode.remove（）；
};
}，[type，svgNode]）；
返回；
});

基于。
你能发布一些代码吗？@RagulParani刚刚为我的图标组件添加了代码@xavascript你知道吗？我在我的项目中也面临同样的问题。您使用的是SVG sprite，它在react中解决了问题。因为sprite SVG由浏览器处理阴影dom和react，它有自己的V-dom。您应该直接使用SVG代码或将其导入img标记中。SVG sprite在某些浏览器中也会遇到问题。我建议使用这里建议的第一个选项。
    import InlineSVG from 'svg-inline-react';

    const svgSource = `<svg xmlns="......</svg>`;
    <InlineSVG src={svgSource} />

const Icon = React.memo(({ url }) => {
  const [svgNode, setSvgNode] = React.useState(null);

  React.useLayoutEffect(() => {
    if (svgNode === null) {
      return;
    }

    const useNode = document.createElementNS("http://www.w3.org/2000/svg", "use");
    useNode.setAttributeNS("http://www.w3.org/1999/xlink", "href", url);
    svgNode.appendChild(useNode);

    return () => {
      useNode.remove();
    };
  }, [type, svgNode]);

  return <svg ref={setSvgNode} />;
});