组件重新渲染时 React SVG 消失答案

【问题标题】：React SVG disappearing when component rerenders组件重新渲染时 React SVG 消失
【发布时间】：2018-11-19 03:25:36
【问题描述】：

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

我正在为我的所有 SVG 图标使用内联 SVG，方法是从单个 sprite 文件中相应地设置 xlinkHref 属性。

一切似乎都很好，除了我的 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;

【问题讨论】：

你能贴一些代码吗？
@RagulParani 刚刚为我的图标组件添加了代码！
@xavascript 你有想过这个吗？
我在我的项目中遇到了同样的问题。您正在使用 SVG sprite，它会在反应中出现问题。因为 sprite SVG 由浏览器 shadow dom 处理并且 react 有它自己的 V-DOM。您应该直接使用 SVG 代码或将其导入 img 标签。 SVG sprite 在某些浏览器中也会出现问题。

标签： javascript reactjs dom svg

【解决方案1】：

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

使用 .svg 文件作为 img src，我们可以在 create-react-app 中看到：

    import logo from './logo.svg';

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

使用 svg-inline-react。欲了解更多信息，请查看here：

    import InlineSVG from 'svg-inline-react';

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

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

祝你好运。

【讨论】：

我会推荐这里建议的第一个选项。

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

【讨论】：