@kotemedia
Режу

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

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

Задача:
реализовать удобную вставку 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 - не пойму.
  • Вопрос задан
  • 55 просмотров
Пригласить эксперта
Ответы на вопрос 1
Не нужно так делать. Это бессмысленно. Ты импортируешь целый файл, чтобы достать из него ID, чтобы затем этот ID передать в другой компонент, чтобы затем он получил по этому ID этот же файл из спрайта, джизуз крайст... я не эксперт, но путь выглядит попорченным излишним рвением к овер-инжинирингу.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы