React：将SVG内容作为变量返回？

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：使用危险地设置内部HTML（请注意名称）。但是，您需要在导入时使用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 }} />;
  }
}