将外部svg文件加载到react组件中的正确方法是什么，以便以后可以通过操作类来动态设置样式

Question

我有一个需要嵌入内联的SVG文件，以便以后可以根据特定条件动态更改其样式。在jQuery中执行此操作很好，但我使用的是ReactJs。

所以我想知道如何在React组件中实现这一目标？

理想情况下，我想要做的是将外部svg嵌入到React组件中，然后在状态发生变化时能够操作svg类。

我尝试使用Inline svg loader作为反应组件，但似乎没有办法以任何方式操纵svg。

这是我的代码，以更好地解释我的情况，

var React = require('react');
var Isvg = require('react-inlinesvg');

var SvgContainer = React.createClass({

    componentDidMount : function(){

      console.log("component did update");

  var $svgComponentDom = $(this.refs.svgComponentRef);

  $svgdom = $(this.refs.svgComponentRef);
  console.log("jquery dom");
  console.log($svgdom);
  $svgdom.find("svg .unit").attr("class", "in-selection");
},

render: function(){
  var chosenBreakpoint = this.props.chosenBreakpoint;

  var svgNamePrefix = "master-";

 var svgUrl= window.baseUrl+'/images/'+svgNamePrefix+''+chosenBreakpoint+'.svg'; 

    return (

              <div className="svg-area" ref="svgComponentRef">
              <Isvg  src={svgUrl}>
                  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.

              </Isvg>  
              </div>
    );
}
});

嵌入式svg有一个带有类unit的多边形元素。如果我尝试使用ref访问它，然后尝试使用jQuery向它添加一个类，它不起作用。我错过了什么吗？