Question

我有SVG的JSON对象，如下所示：

{
    layerType: 'clipart',
    properties: {
      fillColor: '#3765a3',
      width: 300,
      height: 300,
      svgObject: {
        type: 'svg',
        config: {
          fill: '#3765a3',
          height: '100',
          width: '100'
        },
        attributes: {
          viewBox: '0 0 100 100'
        },
        children: [ <------------- Im trying to loop this and get children accordingly 
          {
            type: 'g',
            children: [
              {
                type: 'path',
                attributes: {
                  d: 'M94.4,0H5.5C2.5,0,0,2.5,0,5.5v88.9c0,3,2.5,5.5,5.5,5.5h47.9V61.2h-13V46.1h13V35c0-12.9,7.9-19.9,19.4-19.9c5.5,0,10.3,0.4,11.6,0.6v13.5l-8,0c-6.3,0-7.5,3-7.5,7.3v9.6h14.9l-1.9,15.1h-13v38.7h25.5c3,0,5.5-2.5,5.5-5.5V5.5C99.9,2.5,97.5,0,94.4,0z'
                }
              },
              {
                type: 'rect',
                attributes: {
                  className: 'actionMask',
                  fill: 'transparent',
                  x: '0',
                  y: '0',
                  height: '100',
                  width: '100'
                }
              }
            ]
          }
        ]
      },
      layerName: 'Clipart 1',
      id: 369
    }

我具有用于从JSON对象创建SVG的react组件：

import React from 'react'
import getSvgChildren from '../../../../utils/getSvgChildren'

const Clipart=(props)=>{
    let properties=props.clipart.properties;


    let height,width;
    if(properties.svgObject.config && properties.svgObject.config.width && properties.svgObject.config.height){
        height=properties.svgObject.config.height+'%';
        width=properties.svgObject.config.width+'%';
    }else{
        height='100%';
        width='100%';
    }


  return (
    <div  
        onClick={props.onClick} 
        style={{ 
        height:properties.height+'px',
        width: properties.width+'px',
        }}>
        <svg preserveAspectRatio="none"
        version="1.1"
        aria-hidden="true" 
        focusable="false"
        role="img" 
        xmlns="http://www.w3.org/2000/svg"
        width={width} 
        height={height} 
        fill={properties.fillColor}
        {...properties.svgObject.attributes}
        style={{ position: 'absolute', top: '0px', left: '0px'}}>
          {getSvgChildren(properties.svgObject.children)}  <--- Here I am not getting any output 
        </svg>
    </div>
  )
}
export default Clipart

getSvgChildren在这里：

import React from 'react'
const getSvgChildren=(children)=>{

    children.map((child,index)=>{
        console.log('child===',child);
        let childToReturn;
        if(child.type==='path'){
            childToReturn =(<path key={index} {...child.attributes}></path>)
        }else if(child.type==='rect'){
            childToReturn= (<rect key={index} {...child.attributes}></rect>)
        }else if(child.type==='polygon'){
            childToReturn=(<polygon key={index} {...child.attributes}></polygon>)
        }else if(child.type==='g'){
            childToReturn=(<g key={index}>{getSvgChildren(child.children)}</g>)
        } 
        return childToReturn
    });
}
export default getSvgChildren;

当我添加了上述代码后，它可以成功渲染，但是类型为'g'的svgObject具有多级子级，因此我不知道如何循环它们

<svg {...other stuff}  >

        { properties.svgObject.children.map((child,index)=>{
            if(child.type==='path'){
                return (<path
                    key={index}
                {...child.attributes}
                ></path>)
            }else if(child.type==='rect'){
                return (<rect
                    key={index}
                    {...child.attributes}>
                </rect>)
            }else if(child.type==='polygon'){
                return (<polygon
                    key={index}
                    {...child.attributes}>
                </polygon>)
            }else if(child.type==='g'){
                return (<g key={index}> Here I dont don't know how dynamic loop for multilevel children</g>)
            } 
         }) }
        </svg>

任何人都请帮助我从JSON渲染SVG组件

Answer 1

据我所知，函数getSvgChildren总是返回未定义的，因为它有花括号并且没有return语句。

应该是

const getSvgChildren=(children)=>{
    return children.map((child,index)=>{

或

const getSvgChildren=(children)=> children.map((child,index)=>{

从JSON对象创建SVG时，React不从地图循环返回Child

1 个答案: