Reactjs 反应子列表赢得'；不渲染

我试图在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;

从“React”导入React；
从“./OutbreakItem”导入OutbreakItem；
从“./ListHeader”导入ListHeader；
var OutbreakList=React.createClass({
RenderRoutBreakHeader:函数（键）{
返回(
{this.props.expensions[key].expensions.map（this.renderOutbreak）}
);
},
RenderRoutBreak:函数（对象，i）{
返回
},
render:function（）{
返回(
{Object.keys（this.props.props.map）（this.renderRoutBreakHeader）}
);
}
});
导出默认突发事件列表；

暴发项目

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;

从“React”导入React；
var OutbreakItem=React.createClass({
render:function（）{
返回(
);
}
});
导出默认突发项目；

列表头

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;

从“React”导入React；
var ListHeader=React.createClass({
render:function（）{
返回(
{this.props.county}
);
}
});
导出默认列表头；

---

列表标题会打印，但不会打印项目。在调试中，我可以看到RenderRoutBreak函数被正确的值调用，但它没有被渲染出来。

我已经找出了问题所在。我正在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;

从“React”导入React；
从“./OutbreakItem”导入OutbreakItem；
从“./ListHeader”导入ListHeader；
var OutbreakList=React.createClass({
RenderRoutBreakHeader:函数（键）{
返回(
{this.props.expensions[key].expensions.map（this.renderOutbreak）}
);
},
RenderRoutBreak:函数（对象，i）{
返回
},
render:function（）{
返回(
{Object.keys（this.props.props.map）（this.renderRoutBreakHeader）}
);
}
});
导出默认突发事件列表；