Reactjs组件干扰同一页面上的其他组件

我有两个反应组件，

LikeBox

和

CommentBox

likes.jsx

var React = require('react');

var LikeBox = React.createClass({
    getInitialState: function(){
        return {count: this.props.initialCount}
    },
    render: function(){
      return (
        <div className="likeBox">
            {
                this.state.count && 
                <span>{this.state.count} people like this</span>
            }
        </div>
      );
    }
})

module.exports.LikeBox = LikeBox;

var React = require('react');
var $ = require('app/common/jquery');

var CommentBox = React.createClass({
    getInitialState: function(){
      return {data: []};
    },
    handleCommentSubmit: function(comment){
        this.refreshComments();
    },
    apiURL: function(){
        return this.props.apiUrl+"?content_uuid="+this.props.contentUuid;
    },
    refreshComments: function(){
        $.get(this.apiURL(), function(data){
            this.setState({data: data});
        }.bind(this), 'json');
    },
    componentDidMount: function(){
        this.refreshComments();
    },
    render: function(){
      return (
        <div className="commentBox">
          <h1>Comments</h1>
          <CommentList data={this.state.data} />
          <CommentForm onCommentSubmit={this.handleCommentSubmit} apiURL={this.apiURL()}/>
        </div>
      );
    }
});
...
module.exports.CommentBox = CommentBox;

我有2个jquery插件将div安装到组件上：

likes.js

"use strict";

var $ = require('jquery');
var jQBridget = require('jquery-bridget');
var React = require('react');
var LikeBox = require('app/likes/likes.jsx').LikeBox;


function LikeBoxPlugin( element, options ) {
  this.element = $( element );
  this.options = $.extend( true, {}, this.options, options );
  this._init();
}

LikeBoxPlugin.prototype.options = {};

LikeBoxPlugin.prototype._init = function() {
   React.render(
        <LikeBox initialCount={this.element.data('initial-likes-count')}/>,
        this.element.get(0)
    );
};

$.bridget('likebox', LikeBoxPlugin);

"use strict";

var $ = require('jquery');
var React = require('react');
var jQBridget = require('jquery-bridget');
var CommentBox = require('app/comments/comment_box.jsx').CommentBox;

function CommentBoxPlugin( element, options ) {
  this.element = $( element );
  this.options = $.extend( true, {}, this.options, options );
  this._init();
}

CommentBoxPlugin.prototype.options = {};

CommentBoxPlugin.prototype._init = function() {
   React.render(
        <CommentBox contentUuid={this.element.data('uuid')} apiUrl={this.element.data('api-url')}/>,
        this.element.get(0)
    );
};

$.bridget('commentbox', CommentBoxPlugin);

要在这样的页面上使用插件，请执行以下操作：

<div>
  Post 1
  <div class="likebox' .../>
  <div class="commentbox' .../>
</div>
<div>
  Post 2
  <div class="likebox' .../>
  <div class="commentbox' .../>
</div>

<script type="text/javascript">
var $ = require('jquery');
require('app/comments/comment_box.js');
require('app/likes/likes.js');

$(function(){
    $('.likebox').likebox();
    $('.commentbox').commentbox();
    console.log('loaded controls');
});
</script>

---

我可以看到评论框短暂出现，并被类似框取代。

我发现了问题，我有自动关闭标签：

<div class="likebox' .../>
<div class="commentbox' .../>

<div class="likebox' .../>
<div class="commentbox' .../>

<div class="likebox' ...></div>
<div class="commentbox' ...></div>