Question

我有2个反应组件，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;

comment_box.jsx

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);

comment_box.js

"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>

我的问题是，在运行$('.likebox').likebox();之后，它无法定位评论框，例如。 $('.comment-box').length给出0

我试图换掉：

$(function(){
    $('.commentbox').commentbox();
    $('.likebox').likebox();
    console.log('loaded controls');
});

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

Answer 1

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

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

更改为：

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

的工作。

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

1 个答案: