Заполнение функциональных компонентов, представляющих SVG из массива объектов - PullRequest
Новая
       28

Заполнение функциональных компонентов, представляющих SVG из массива объектов

0 голосов
/ 16 июня 2020

Я попытался заполнить корзину продуктов значками svg (функциональными компонентами) "

* / BusinessCards.svg 

function BusinessCards(props) {
  const {fill} = props; 
  return (
    <svg width={100} height={90} viewBox="0 0 100 90" >
      <path
        fill={fill}
        stroke="red"
        strokeWidth={3}
        strokeMiterlimit={10}
        d="M95.5 64.5a5 5 0 01-5 5h-80a5 5 0 01-5-5v-40a5 5 0 015-5h80a5 5 0 015 5v40z"
      />
      <path
        fill="none"
        stroke="red"
        strokeWidth={2}
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeMiterlimit={10}
        d="M24.26 29.322c1.725 2.828.484 5.862-2.343 7.588a6 6 0 11-6.25-10.244c1.563-.952 2.942-1.235 4.556-.704"
      />
      <path
        fill="none"
        stroke="#999"
        strokeWidth={3}
        strokeLinecap="round"
        strokeMiterlimit={10}
        d="M34 31.5h4M44 31.5h18M57 41.5h29M44 47.5h42M21 54.5h19M21 60.5h28M15 60.5h0M15 54.5h0"
      />
    </svg>
  )
}
export default BuissnessCard

Простой API для предоставления данных из массива объектов * / actions. js

 import BusinessCards from "@/components/UX/BusinessCards.js";
 import Flyers from "@/components/UX/Flyers.js";
       const PRODUCTS = [
          {
            icon: BuisnessCards,
            product: 'buisnessCards',
            id: 1,
            href: '/polygrafy/[product]',
            label: 'buisness cards',
            as: '/polygrafy/buisnessCards'
          },
          {
            icon: Flyers,
            product: 'flyers',
            id: 2,
            href: '/polygrafy/[product]',
            label: 'flyers',
            as: '/polygrafy/flyers'
          },


            export const getProducts = () => {
              return new Promise((resolve, reject) => {
              setTimeout(() => {
                resolve(PRODUCTS )
                reject('Cannot fetch data!')
            }, 50)
        })
      }

и, наконец, моя страница * / index. js

import Link from "next/link";
import React, { Component } from "react";
import { getProducts } from "@/actions/";

const Home = (props) => {
  const { products } = props;
  return (
           <ul>
              {products.map((product) => (
                <li
                  key={product.id}  
                >
                  <Link
                    href={product.href}
                    as={product.as}
                  >
                    <a>
                      <Component name={product.icon} fill='#ffffff'/>        
                      {product.label}
                    </a>
                  </Link>
                </li>
              ))}
            </ul>
)
export default Home;

Home.getInitialProps = async () => {
  const products = await getProducts();
  return {
    products,
  };
};

После запуска этого кода я получаю сообщение об ошибке «

Ошибка сервера TypeError: inst.render не является функцией. Эта ошибка произошла при создании страницы. Все журналы консоли будут отображаться в окне терминала.

Мои вопросы: как загрузить функциональные компоненты svg на мой веб-сайт?

1 Ответ

1 голос
/ 16 июня 2020

Вы должны использовать React.createElement (el, props, children)

Проверить официальный do c здесь https://fr.reactjs.org/docs/react-api.html#createelement

В вашем случае просто замените компонент значка на это: 

{React.createElement(product.icon, { fill : '#ffffff'})}
...