Рендеринг SVG из объекта

У меня есть проект 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 в консоли возвращает объект такого рода

  • {$$typeof: Symbol(react.forward_ref), render: ƒ}$$typeof: Symbol(react.forward_ref)render: ƒ SvgSanfrancisco({ title, titleId, ... props }, svgRef) displayName: (... )get displayName: ƒ () set displayName: ƒ (имя) аргументы: (...) вызывающий абонент: (...) длина: 1name: "set" прототип: {конструктор: ƒ} прототип: ƒ ()[[FunctionLocation ]]: react.development.js:1401[[Scopes]]: Scopes[4]proto: Object...*

Можно ли получить доступ к самой иконке 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>
                            );
                        })}

<Имг источник = "...">

Ihor Yanovchyk 22.12.2020 21:27
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
1
1 586
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Если свойство 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>
   );})}

Большое спасибо. Это действительно сработало. Скептически относился к тому, чтобы попробовать его как таковой, потому что это был импортный компонент.

Chidex 22.12.2020 22:00

Попробуйте сохранить сам компонент в объекте. например

{ svg: < SanFrancisco/>, city: "San Francisco, CA", number: 54 },

а потом рендерить {location.svg}

Спасибо. Уже пробовал что-то подобное, и это сработало.

Chidex 22.12.2020 22:13

Другие вопросы по теме