ReactJS Parent not rendering Children

问题描述:

使用backbone-react-component我想构建一个任务列表的排序。如果你看看snipplet,你会看到核心变量tasksListtasksListChild,其中我的代码迄今为止似乎渲染到尽可能多的_createTaskChild但渲染超出了我没有任何东西,从字面上看,甚至没有在控制台窗口中的错误。我把console.log在这里更好的阐述一下,哪里有什么样的失败?console.log(model.get('task_id'));会把控制台放出来没问题。然而,console.log('hi')没有。我希望通过来这里额外的眼睛可以告诉我在哪里搞砸了。ReactJS Parent not rendering Children

var tasksListChild = React.createClass({ 
    mixins: [BackboneReactMixin], 
    render: function() { 
     console.log('hi') 
     return (
      <span onClick={ this._handleTaskClick }>nothing</span> 
     ); 
    }, 
    _handleTaskClick: function (event) { 
     console.log(this.props) 
    } 
}); 


var tasksList = React.createClass({ 
    mixins: [BackboneReactMixin], 
    render: function() { 
     return (
      <div className="list-group js__page-list-group-tasks"> 
      { 
       this.getCollection().map(this._createTaskChild) 
      } 
      </div> 
     ); 
    }, 
    _createTaskChild: function (model) { 
     console.log(model.get('task_id')); 
     return (
     <a className="list-group-item"> 
      <tasksListChild key={model.get('task_id')} model={model} /> 
     </a> 
     ); 
    } 
}); 
+0

是什么this.getCollection()返回数组? –

+0

mixin提供的功能可以桥接反应和主干。据我了解,它需要传递的集合作出反应,并将听众与听众联系起来,以应对反应。但是在这种情况下,假设我的理解是正确的,那么它应该把集合传递并使用map将它分解为每个子视图的单个模型 – chris

+0

您需要知道getCollection返回的内容,以便了解你正在映射。 key = {model.get('task_id')}暗示该对象具有嵌入的get函数。这是不常见的。 –

请问这项工作。

_createTaskChild: function (model) { 
 
     var taskID = model.get('task_id'); 
 
     console.log(taskID); 
 
     return (
 
     <a className="list-group-item"> 
 
      <tasksListChild key={taskID} model={model} /> 
 
     </a> 
 
     ); 
 
    }