Реагировать Преобразование HTML в компонент и передать дополнительные реквизиты

Question

Я использую [svg-inline-loader][1] для встраивания изображений SVG в свое приложение React.

Когда я импортирую SVG, модуль веб-пакета передает его в переменную в виде строки HTML.Мне нужно преобразовать эту строку в компонент React, чтобы я мог передать ему дополнительные реквизиты.

Мой текущий код выглядит следующим образом

import SVGlogo from './logo.svg';

export default () => (
  <a href="/" className="navbar-item is-purple" dangerouslySetInnerHTML={{ __html: SVGlogo }} /> 
);

Это отлично работает, но мне нужно пройти дополнительныеатрибуты / реквизиты SVGlogo.Есть ли способ, которым я могу сделать это элегантно, не изменяя вручную строку и не добавляя к ней атрибуты.

Answer 1

Я настоятельно рекомендую создать собственный компонент, не относящийся к классу, для вашего SVG-материала, а затем импортировать его в компонент section / HOC.

См. Мой пример здесь:

Привет!