反应：将SVG内容作为变量返回？我目前做这

：反应：将SVG内容作为变量返回？我目前做这

class Checked extends React.Component { 
    render() { 
     return (
      <svg width="24" fill="#00ea00" height="24" viewBox="0 0 24 24"> 
       <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/> 
      </svg> 
     ); 
    } 
}

但我想在做这样的事情：

import imgTable from '../img/catering_table.svg' 

class Checked extends React.Component { 
    render() { 
     return imgTable; 
    } 
}

为什么这个不行？我在这里返回变量而不是实际内容？我会认为这两个是相同的。

PS：Webpack设置正确，我在该文件的其他位置使用导入，所以不是这样。（我用GatsbyJS这里顺便说一下）

来源

2017-10-19 George Welder

选项1：包裹和一个无状态组件：

const ImgTable =() => (
    <svg width="24" fill="#00ea00" height="24" viewBox="0 0 24 24"> 
     <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/> 
    </svg> 
); 

export default ImgTable;

现在，您可以导入它作为一个组件：

import ImgTable from '../img/ImgTable' 

class Checked extends React.Component { 
    render() { 
     return <ImgTable />; 
    } 
}

选项2：使用dangerouslySetInnerHTML（注意名称）。但是，你需要的SVG转换为字符串使用进口的东西像babel-plugin-transform-svg-import-to-string：

import imgTable from '../img/catering_table.svg' // this will return a string 

class Checked extends React.Component { 
    render() { 
     return <div dangerouslySetInnerHTML={{__html: imgTable }} />; 
    } 
}

来源

2017-10-19 12:18:52

过早保存。在它上面工作。 –

增加了选项2。 –

最后我意识到它不利于OP。他想从.svg文件插入他的svp。它也许可以做一个包装和'dangerouslySetInnerHTML = {svg_content}' – Alexis

babel-plugin-inline-react-svg是一个插件，它允许你做，你在你的问题暗示什么。它只是为svg文件中的每个节点创建一个反应组件。然后它用一个可以轻松命名的根元素包装整个组件树。

导入你这样的import SampleSVG from './sample.svg';。并将其渲染到您的应用程序中，如<SampleSVG />。这是安全和简单的。

来源

2017-10-19 17:40:18 Scriptonomy

这是很好知道:) –

反应：将SVG内容作为变量返回？我目前做这

回答

相关问题