反应子列表将不会呈现

Question

我想在React中创建嵌套列表，但由于某种原因，只有顶部列表呈现，而不是列表中的项目的子项。这是我的代码任何帮助将不胜感激，因为我一直在这一段时间卡住了。

import React from 'react'; 

import OutbreakItem from './OutbreakItem'; 
import ListHeader from './ListHeader'; 

var OutbreakList = React.createClass({ 

    renderOutbreakHeader: function(key) { 
    return (
     <ListHeader key={key} county={this.props.outbreaks[key].county}> 
     {this.props.outbreaks[key].outbreaks.map(this.renderOutbreak)} 
     </ListHeader> 
    ); 
    }, 

    renderOutbreak: function(object, i) { 
    return <OutbreakItem key={object.recordId} outbreak={object} /> 
    }, 

    render: function() { 

    return (
     <div className="container body-content"> 
     {Object.keys(this.props.outbreaks).map(this.renderOutbreakHeader)} 
     </div> 
    ); 
    } 
}); 

export default OutbreakList; 

The Outbreak Item;

import React from 'react'; 

var OutbreakItem = React.createClass({ 

    render: function() { 

    return (
     <div className="container outbreak-item"> 
      <a href="#"> 
      <div className="row"> 
       <div className="col-md-4 outbreak-item-main-text">{this.props.outbreak.facility}</div> 
       <div className="col-md-2 outbreak-item-main-text">{this.props.outbreak.declaredDate}</div> 
       <div className="col-md-2 outbreak-item-normal-text">{this.props.outbreak.admittingDate}</div> 
       <div className="col-md-2 outbreak-item-main-text">{this.props.outbreak.duration} days</div> 
       <div className="col-md-2"><span className="label label-warning">{this.props.outbreak.pathogen}</span></div> 
      </div> 
      <div className="row"> 
       <div className="col-md-4 outbreak-item-sub-text">{this.props.outbreak.location}, {this.props.outbreak.type}</div> 
       <div className="col-md-2 outbreak-item-sub-normal-text">Date Closed</div> 
       <div className="col-md-2 outbreak-item-sub-normal-text">Admissions Opened</div> 
       <div className="col-md-2 outbreak-item-sub-text">Outbreak Duration</div> 
       <div className="col-md-2"></div> 
      </div> 
      </a> 
     </div> 
    ); 
    } 
}); 

export default OutbreakItem; 

的ListHeader

import React from 'react'; 

var ListHeader = React.createClass({ 

    render: function() { 

    return (
     <div className="container"> 
      <div className="row outbreak-item-header"> 
       <div className="col-md-12">{this.props.county}</div> 
      </div> 
     </div> 
    ); 
    } 
}); 

export default ListHeader; 

清单打印头但不是爆发的项目。在调试中，我可以看到使用正确的值调用renderOutbreak函数，但不会渲染出来。

Answer 1

我已经找出问题所在。我在ListHeader中渲染OutbreakItem。我需要在列表头之后呈现它。这是更正的代码。

import React from 'react'; 

import OutbreakItem from './OutbreakItem'; 
import ListHeader from './ListHeader'; 

var OutbreakList = React.createClass({ 

    renderOutbreakHeader: function(key) { 
    return (
     <div> 
     <ListHeader key={key} county={this.props.outbreaks[key].county} /> 
     {this.props.outbreaks[key].outbreaks.map(this.renderOutbreak)} 
     </div> 
    ); 
    }, 

    renderOutbreak: function(object, i) { 
    return <OutbreakItem key={object.recordId} outbreak={object} /> 
    }, 

    render: function() { 

    return (
     <div className="container body-content"> 
     {Object.keys(this.props.outbreaks).map(this.renderOutbreakHeader)} 
     </div> 
    ); 
    } 
}); 

export default OutbreakList;