< svg> React Component的元素字符串 [英] <svg> element string to React Component

问题描述

您好，我给了一个带有图像ID的房间对象，我将其提取并返回以下

Hi I am given a room object with an image id which I fetch and am returned the following

<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组件中(添加宽度和高度)，则该组件可以正常工作.

If I insert the returned string manually as follows into a react component (adding width and height) then the component works fine.

<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;

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

Given that this element is given to me dynamically how can I render it when I pass the data to the component via props, something like

import React, { Component } from "react";

class LoxIcon extends Component{

    render(){
        return(
                {this.props.svg}
   }        
  }
}  
export default LoxIcon;
  

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

I have tried react-inlinesvg and reactSvg npm modules but both require a file not a string

推荐答案

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

As you are passing the string representation of the html, you have to use dangerouslySetInnerHTML to set the inner html to set the svg although it is not advised as it exposes to cross site scripting, so you are better off looking for other alternatives such as setting the values as proper dom representation in the React component's render method. Just in case you want to use this method, you can try following:

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

您可以在dangerouslySetInnerHtml 此处上进一步阅读.

You can have further reading on dangerouslySetInnerHtml here.

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

As JP4 has suggested, you can create svg object in each element of roomsData array and pass that object as the props to LoxIcon as answered by JP4. So your component will be look like:

<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的元素字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！