У меня есть проект React, над которым я работаю, и я пытаюсь отобразить SVG из массива объектов. Однако я получаю сообщение об ошибке всякий раз, когда пытаюсь получить доступ к SVG из метода карты. Есть ли лучший способ пройти процесс, который мне не хватает. Для контекста:
locations: [
{ svg: SanFrancisco, city: "San Francisco, CA", number: 54 },
{ svg: Redwood, city: "Redwood City, CA", number: 1 },
{ svg: NewYork, city: " New York, NY", number: 17 },
{ svg: Portland, city: "Portland, OR", number: 10 }
]
SVG уже были импортированы здесь как компоненты React.
Использование в jsx:
{locations.map((location) => {
return (
<a href = "#">
{" "}
<div className = "locations-card card">
{location.svg}
<h2>{location.city}</h2>
<p>{location.number} openings</p>
</div>
</a>
);
})}
регистрация location.svg в консоли возвращает объект такого рода
Можно ли получить доступ к самой иконке svg через объект?
Обновлено: по предложению приведенный ниже код помог
{locations.map((location) => {
return (
<a href = "#">
{" "}
<div className = "locations-card card">
<location.svg/>
<h2>{location.city}</h2>
<p>{location.number} openings</p>
</div>
</a>
);
})}
Если свойство svg является react component
:
{locations.map((location) => {
const Svg = location.svg; // --> get the component
return (
<a href = "#">
{" "}
<div className = "locations-card card">
<Svg />{/* --> render it*/}
<h2>{location.city}</h2>
<p>{location.number} openings</p>
</div>
</a>
);})}
Большое спасибо. Это действительно сработало. Скептически относился к тому, чтобы попробовать его как таковой, потому что это был импортный компонент.
Попробуйте сохранить сам компонент в объекте. например
{ svg: < SanFrancisco/>, city: "San Francisco, CA", number: 54 },
а потом рендерить {location.svg}
Спасибо. Уже пробовал что-то подобное, и это сработало.
<Имг источник = "...">