javascript - react : Returning SVG contents as variable?

Question

我目前正在这样做:

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)

Answer 1

选项 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 (注意名字)。但是，您需要在导入时使用 babel-plugin-transform-svg-import-to-string 之类的东西将 SVG 转换为字符串。 :

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

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