Реагировать на исчезновение SVG при повторном рендеринге компонента

Question

Я делаю приложение реакции с некоторыми значками SVG в моих компонентах.Например, у меня есть компонент SearchBar, который включает в себя элемент ввода и кнопку с иконкой поиска.

Я использую встроенный SVG для всех моих значков SVG, устанавливая атрибут xlinkHref соответственно изодин файл спрайта.

Кажется, все работает нормально, за исключением того, что мои значки SVG случайно исчезают, когда я нажимаю на них.Элемент кнопки, который содержит значок, не исчезает, только значок SVG.Я проверил дерево DOM на devtools, и кажется, что есть проблема с узлом с именем "# shadow-root".

Когда мои SVG-иконки видны, они помещаются как дочерние узлы«# теневой корень».Однако, когда они исчезают, дерево 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-Reaction-app:

    import logo from './logo.svg';

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

Используйте svg-inline-реагировать.Для получения дополнительной информации проверьте здесь :

    import InlineSVG from 'svg-inline-react';

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

Конвертируйте SVG в base64 и установите его на фоновое изображение вашей кнопки.

Удачи.