当组件重新渲染时,React SVG消失

Question

我正在使用我的组件中的一些SVG图标做出反应应用程序.例如,我有一个SearchBar组件,其中包含输入元素以及一个包含搜索图标的按钮.

我通过在单个精灵文件中相应地设置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;

Answer 1

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

1. 使用 .svg 文件作为 img src，正如我们在 create-react-app 中看到的：

    import logo from './logo.svg';

    render() {...
          <img src={logo} className="App-logo" alt="logo" />
          ...}

2. 使用 svg-inline-react。欲了解更多信息，请查看此处：

    import InlineSVG from 'svg-inline-react';

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

3. 将 SVG 转换为 base64 并将其设置在按钮的背景图像中。

祝你好运。