更新2016-05-27
从React
v15开始，React中对SVG的支持与当前浏览器对SVG的支持（接近？）达到100％奇偶校验（源）。您只需要应用一些语法转换就可以使其与JSX兼容，就像您已经对HTML所做的一样（
class→
className，→
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> );}工作码笔演示
有关特定支持的更多详细信息，请查看文档的支持的SVG属性列表。这是（现已关闭的）GitHub问题，该问题跟踪对命名空间SVG属性的支持。
先前的答案
您可以进行简单的SVG嵌入，而不必
dangerouslySetInnerHTML通过剥离命名空间属性来使用。例如，这有效：
render: function() { return ( <svg viewBox="0 0 120 120"> <circle cx="60" cy="60" r="50"/> </svg> ); }此时，您可以考虑添加诸如之类的道具
fill，或者其他可能对配置有用的道具。
