Question

我正在尝试在React中创建嵌套列表但由于某种原因只有顶部列表呈现而不是列表中项目的子项。这是我的代码，任何帮助都会受到赞赏，因为我已经坚持了一段时间。

  // Update outliers.
  var outlier = g.selectAll("circle.outlier")
      .data(outlierIndices, Number);

  outlier.enter().insert("circle", "text")
      .attr("class", "outlier")
      .attr("r", 5)
      .attr("cx", width / 2)
      .attr("cy", function(i) { return x0(d[i]); })
      .style("opacity", 1e-6)
    .transition()
      .duration(duration)
      .attr("cy", function(i) { return x1(d[i]); })
      .style("opacity", 1);

爆发项目;

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;

ListHeader

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;

列表标题打印但不是爆发项目。在调试中，我可以看到使用正确的值调用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;

React子列表不会渲染

1 个答案: