反应:将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这里顺便说一下)
答
选项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 }} />;
}
}
答
babel-plugin-inline-react-svg
是一个插件,它允许你做,你在你的问题暗示什么。它只是为svg文件中的每个节点创建一个反应组件。然后它用一个可以轻松命名的根元素包装整个组件树。
导入你这样的import SampleSVG from './sample.svg';
。并将其渲染到您的应用程序中,如<SampleSVG />
。这是安全和简单的。
+0
这是很好知道:) –
过早保存。在它上面工作。 –
增加了选项2。 –
最后我意识到它不利于OP。他想从.svg文件插入他的svp。 它也许可以做一个包装和'dangerouslySetInnerHTML = {svg_content}' – Alexis