Question

嗨，我给了一个带有图像ID的房间对象，该对象已获取并返回以下

<svg id="Ebene_1" style={{"enableBackground":"new 0 0 32 32"}} version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" xmlSpace="preserve">
	<path d="M17.1,27h-10v-0.5c2.3,0,2.3-1,2.3-3.5h5.5c0,2.5,0,3.5,2.3,3.5V27z M30,6v20c0,0.6-0.4,1-1,1H18c-0.6,0-1-0.4-1-1v-4H3&#xD;&#xA;&#x9;c-0.6,0-1-0.4-1-1V9c0-0.6,0.4-1,1-1l14,0V6c0-0.6,0.4-1,1-1l11,0C29.6,5,30,5.4,30,6z M17,20h3v-9v-1h-1h-2H4v10H17z M24.8,22.5&#xD;&#xA;&#x9;c0-0.7-0.6-1.2-1.2-1.2s-1.2,0.6-1.2,1.2s0.6,1.2,1.2,1.2S24.8,23.2,24.8,22.5z M28,10h-6v1h6V10z M28,8h-7c0.6,0,1,0.4,1,1h6V8z"/>
</svg>

如果我按如下方式手动将返回的字符串插入到react组件中（添加宽度和高度），则该组件可以正常工作。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


import React, { Component } from "react";

class LoxIcon extends Component{

    render(){
        return(
            <svg width ={'200'} height ={'200'}id= "Ebene_1" style={{"enableBackground":"new 0 0 32 32"}} version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" xmlSpace="preserve">
	                <path d="M17.1,27h-10v-0.5c2.3,0,2.3-1,2.3-3.5h5.5c0,2.5,0,3.5,2.3,3.5V27z M30,6v20c0,0.6-0.4,1-1,1H18c-0.6,0-1-0.4-1-1v-4H3&#xD;&#xA;&#x9;c-0.6,0-1-0.4-1-1V9c0-0.6,0.4-1,1-1l14,0V6c0-0.6,0.4-1,1-1l11,0C29.6,5,30,5.4,30,6z M17,20h3v-9v-1h-1h-2H4v10H17z M24.8,22.5&#xD;&#xA;&#x9;c0-0.7-0.6-1.2-1.2-1.2s-1.2,0.6-1.2,1.2s0.6,1.2,1.2,1.2S24.8,23.2,24.8,22.5z M28,10h-6v1h6V10z M28,8h-7c0.6,0,1,0.4,1,1h6V8z"/>
            </svg>
        )
    }
}  
export default LoxIcon;

鉴于此元素是动态提供给我的，当我通过道具将数据传递到组件时，如何呈现它呢？

import React, { Component } from "react";

class LoxIcon extends Component{

    render(){
        return(
                {this.props.svg}
   }        
  }
}  
export default LoxIcon;

我尝试了react-inlinesvg和reactSvg npm模块，但是都需要文件而不是字符串

Answer 1

一种选择是将svg元素的props传递到组件中。如果您的动态元素并不总是svg，则可以创建一些条件渲染来检查其是否为svg元素。

import React, { Component } from "react";

class LoxIcon extends Component{

    render(){
        return(
            <svg width={this.props.svg.width} height={this.props.svg.height} id={this.props.svg.id} style={this.props.svg.id} version={this.props.svg.id} viewBox={this.props.svg.viewBox} xmlns={this.props.svg.xmlns} x={this.props.svg.x} y={this.props.svg.y} xmlSpace={this.props.svg.xmlSpace}>
                    <path d={this.props.svg.d}/>
            </svg>
        )
    }
}  
export default LoxIcon;

Answer 2

在传递html的字符串表示形式时，必须使用dangerouslySetInnerHTML来设置内部html来设置svg，尽管不建议这样做，因为它会暴露于跨站点脚本中，因此您最好寻找其他选择，例如在React组件的render方法中将值设置为正确的dom表示形式。万一您想使用此方法，可以尝试以下操作：

class LoxIcon extends Component {
    render() {
        return (<div dangerouslySetInnerHTML={{ __html: this.props.svg }} />);
       }
    }
export default LoxIcon;

您可以进一步阅读dangerouslySetInnerHtml here。

编辑：

按照 JP4 的建议，您可以在roomsData数组的每个元素中创建svg对象，并将该对象作为道具传递给LoxIcon，这由 JP4回答。这样您的组件将如下所示：

<Grid container className={classes.root} > 
    <Grid item > 
        <Grid container alignItems={'center'} justify="center" spacing={16}> 
        {(this.props.roomsData) ? this.props.roomsData.map(room => 
            (<Grid key={room.uuid} item > <Card > <LoxIcon svg={room.svgObject} /> </Card> </Grid>)) : null} 
        </Grid> 
    </Grid>
</Grid>

您的svgObject应该像：

{
    height: value,
    width: value.
.... followed by all the properties.
}

和您的LoxIcon就像

import React from 'react';

const LoxIcon = ({ svgObject }) => (<svg width ={svgObject.width} height ={svgObject.height} id={svgObject.id} ...{all the attributes of svgObject your want to set>
<path d={svgObject.path.d}/>
</svg>);

export default LoxIcon;

<svg>元素字符串到React Component

2 个答案: