组件重新渲染时，React SVG消失

Question

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

我通过在单个精灵文件中相应地设置xlinkHref属性，为所有SVG图标使用内联SVG。

除了我点击它们时我的SVG图标随机消失外，一切似乎都运行得很好。包含图标的按钮元素不会消失，只会消失SVG图标。我检查了devtools上的DOM树，似乎有一个名为＆＃34;＃shadow-root＆＃34;的节点存在问题。

当我的SVG图标可见时，它们被放置为＆＃34;＃shadow-root＆＃34;的子节点。然而，当它们消失时，DOM树显示＆＃34;＃shadow-root＆＃34;节点不再有任何子节点，实际上无法找到我的SVG图标。

消失之前：

消失后：

看到我可爱的SVG图标突然消失，令人心碎......

请指教！

- - - - - - - - EDIT 以下是我用于插入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" />
          ...}

1. 使用svg-inline-react。有关更多信息，请检查here：

    import InlineSVG from 'svg-inline-react';

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

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

祝你好运。

Answer 2

您可以自己构建SVG元素。您可以让React构建一个空的<svg>元素，然后使用ref和一个效果手动插入一个<use>元素：

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

基于this implementation。