从对象数组填充表示 SVG 的功能组件

Question

我尝试用 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,
  };
};

在运行这段代码之后我得到了错误

Server Error TypeError: inst.render is not a function This error happened while generating the page. Any console logs will be displayed in the terminal window.

我的问题是：如何向我的网站提供 svg 功能组件？

Answer 1

你必须使用React.createElement(el, props, children)

在这里查看官方文档https://fr.reactjs.org/docs/react-api.html#createelement

在您的情况下，只需将您的图标组件替换为：

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

从对象数组填充表示 SVG 的功能组件

Populating functional components representing SVG from array of Objects

methods

svg

reactjs

server-side-rendering

next.js