更新日期：2016年5月27日

从React v15开始，React中对SVG的支持（接近？）与当前浏览器对SVG的支持100%相同（source）。您只需要应用一些语法转换，使其与JSX兼容，like you already have to do for HTML（class → className，style="color: purple" → style={{color: 'purple'}}）。对于任何命名空间（冒号分隔）属性，例如xlink:href，则删除:并将属性的第二部分大写，例如xlinkHref。以下是一个svg的示例，其中包含<defs>，<use>和内联样式：

function SvgWithXlink (props) {
    return (
        <svg
            width="100%"
            height="100%"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
        >
            <style>
                { `.classA { fill:${props.fill} }` }
            </style>
            <defs>
                <g id="Port">
                    <circle style={{fill:'inherit'}} r="10"/>
                </g>
            </defs>

            <text y="15">black</text>
            <use x="70" y="10" xlinkHref="#Port" />
            <text y="35">{ props.fill }</text>
            <use x="70" y="30" xlinkHref="#Port" className="classA"/>
            <text y="55">blue</text>
            <use x="0" y="50" xlinkHref="#Port" style={{fill:'blue'}}/>
        </svg>
    );
}

Working codepen demo
有关特定支持的更多细节，请查看文档中支持的SVG属性列表，这里是跟踪名称空间SVG属性支持的GitHub issue（现已关闭）。

上一个答案

你可以做一个简单的SVG嵌入，而不必使用dangerouslySetInnerHTML，只需剥离名称空间属性即可。

render: function() {
            return (
                <svg viewBox="0 0 120 120">
                    <circle cx="60" cy="60" r="50"/>
                </svg>
            );
        }

此时，您可以考虑添加fill之类的 prop ，或其他任何可能对配置有用的 prop 。

如果您只想包含一个静态svg字符串，可以使用dangerouslySetInnerHTML：

render: function() {
    return <span dangerouslySetInnerHTML={{__html: "<svg>...</svg>"}} />;
}

并且React将直接包含标记而根本不处理它。

According to a react developer，则不需要名称空间xmlns。如果需要属性xlink:href，则可以使用react 0.14中的xlinkHref
示例

Icon = (props) => {
  return <svg className="icon">
    <use xlinkHref={ '#' + props.name }></use>
  </svg>;
}

如果你想从一个文件加载它，你可以尝试使用React-inlinesvg-这是非常简单和直接的。

import SVG from 'react-inlinesvg';

<SVG
  src="/path/to/myfile.svg"
  preloader={<Loader />}
  onLoad={(src) => {
    myOnLoadHandler(src);
  }}
>
  Here's some optional content for browsers that don't support XHR or inline
  SVGs. You can use other React components here too. Here, I'll show you.
  <img src="/path/to/myfile.png" />
</SVG>

你可以导入svg，它可以像图像一样使用它

import chatSVG from '../assets/images/undraw_typing_jie3.svg'

并在img标签中伊势

<img src={chatSVG} className='iconChat' alt="Icon chat"/>

我找到的最好的方法是这个网站
https://react-svgr.com/playground/
你复制一个svg，它会给予你一个react函数组件，svg被转换成react代码。

有一个包可以为您转换它，并将svg作为字符串返回，以便在reactJS文件中实现。
https://www.npmjs.com/package/convert-svg-react