javascript - element string to React Component

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>

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

<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 模块，但都需要文件而不是字符串

标签： javascriptreactjssvg

Answer 1

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

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

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

编辑：

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

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