Как правильно последовательно пробросить переменные в react компонент?

Question

[Kote]

Простите заранее, я новичок. Совсем.

Задача:
реализовать удобную вставку svg файлов в вебстраницу, при этом формируя спрайт. Вставку иконы делаем с помощью use

Используется плагин https://github.com/JetBrains/svg-sprite-loader

Настроил и все работает например вот так:

import logo from "../images/svg/logo.svg";

 <svg>
    <use xlinkHref={`#${logo.id}`} />
  </svg>

Спрайт вставляется, id задан корректно, svg выводится отлично. При сборке logo.id заменяется на реальное название символа из спрайта.

Проблема:
Я бы хотел получить универсальный компонент, в котором название (ID svg символа для вставки) можно было бы задавать. качестве переменной. Пробую вот так и не работает:

const Icon = ({symbolname}) => (
  <svg>
    <use xlinkHref={`#${`${symbolname}.id`}`}/>
  </svg>
);

<Icon symbolname="logo" />

Получается, что переменная от этого компонента принимается ок - я получаю после компиляции logo.id на странице, а вот как заставить вторым шагом развернуть реальный id - не пойму.

Comments

[WbICHA]

Это не проблема, всё работает корректно. Ты передаёшь строку, преобразовываешь её в другую строку.
В первом же варианты ты используешь объект и его метод.

[Kote]

WbICHA, я понимаю, но не могу сообразить как мне скормить уже подготовленное имя параметра для работы метода компонента

[Kote]

<Svgsprite name={logo.id} vbox={logo.viewBox} />

<svg className={`svg-${props.name}`} viewBox={`${props.vbox}`}>
    <use xlinkHref={`#${`${props.name}`}`} />
    </svg>

как промежуточный итог пока так, хочется еще лучше - 1 точку входа, название айди и все :)

Answer 1

[Алексей Николаев]

Не нужно так делать. Это бессмысленно. Ты импортируешь целый файл, чтобы достать из него ID, чтобы затем этот ID передать в другой компонент, чтобы затем он получил по этому ID этот же файл из спрайта, джизуз крайст... я не эксперт, но путь выглядит попорченным излишним рвением к овер-инжинирингу.

Вместо этого передавайте ID строкой. Спрайт вы и так сделаете при сборке отдельно, а вместо ID просто передаете название иконки вручную. Это ничем фактически не отличается от импорта вручную, зато гораздо проще и красивее.