如何动态地将html表格单元格数据插入到React中带有动态标题的表格中？

Question

我正在创建一个带有React 0.14.6的<table> ，它有一系列列标题，动态插入到<table>的<thead>中：

CourseTable.js ：

import CourseList from './CourseList';
import GradesHeader from './GradesHeader';
import React, {Component} from 'react';

export default class CourseTable extends Component {
  /**
   * Gets all unique terms that have grades
   * @param courses {Array}
   * @return {Array}
   */
  getUniqueTerms(courses) {
    let uniqueTerms = [];
    courses.forEach(course => {
      if (course.grades) {
        Object.keys(course.grades).forEach(term => {
          if (uniqueTerms.indexOf(term) === -1) {
            uniqueTerms.push(term);
          }
        })
      }
    });
    return uniqueTerms;
  }

  createGradesHeaders(courses) {
    return this.getUniqueTerms(courses).map(term => {
      return (
        <th>
          <GradesHeader headerText={term}/>
        </th>
      );
    });
  }

  render() {
    let headers = this.createGradesHeaders(this.props.courses);
    return (
      <table className="table table-bordered table-condensed">
        <thead>
        <tr>
          <th>
            Period
          </th>
          <th>
            Class
          </th>
          <th>
            Term
          </th>
          <th>
            Date Enrolled
          </th>
          <th>
            Date Left
          </th>
          <th>
            <div>Absenses</div>
            <div>All (Excused)</div>
          </th>
          <th>
            Tardies
          </th>
          <th></th>
          {headers}
          <th>
            Teacher
          </th>
        </tr>
        </thead>
        <CourseList courseData={this.props.courses}/>
      </table>
    );
  }
}

GradesHeader.js ：

import React, {Component} from 'react';

export default class GradesHeader extends Component {
  render() {
    return (
      <div>
        {this.props.headerText}
      </div>
    );
  }
}

Course.js ：

import React, {Component} from 'react';

export default class Course extends Component {
  render() {
    const unexcused = !!this.props.courseData.attendance.unexcused ? this.props.courseData.attendance.unexcused : 0;
    const excused = !!this.props.courseData.attendance.excused ? this.props.courseData.attendance.excused : 0;
    const totalAbsences = unexcused + excused;
    return (
      <tr>
        <td>
          {this.props.courseData.expression}
        </td>
        <td>
          {this.props.courseData.course_name}
        </td>
        <td>
          {this.props.courseData.abbreviation}
        </td>
        <td>
          {this.props.courseData.dateenrolled}
        </td>
        <td>
          {this.props.courseData.dateleft}
        </td>
        <td>
          {totalAbsences}
          ({excused})
        </td>
          // Grades for this course go here
        <td>
        </td>
        <td>
          {this.props.courseData.lastfirst}
        </td>
      </tr>
    );
  }
}

你可以在CourseTable.js中看到我动态生成表格<thead>这一部分的标题。 我对如何将每个等级的数据/ pidgeonhole插入相应的列感到困惑。

我想我需要以某种方式识别动态生成的每个<th>头元素，并在插入这些列时引用它们，但我不确定如何。

Answer 1

正如评论中所提到的，您应该使用状态。 各州非常有用。 ReactJS状态如果你想要pidgeonhole新标题，你可以为它们分配一个ID，这样你就可以在渲染新的时正确地循环它们。 如上所述，反应会重新呈现状态变化。 在facebooks教程页面和文档中都有一些这样的例子。

假设您在对象中收集所有标题，或者它们可能来自数据库。

var headers = [{id: 0, name: grade}
               {id: 1, name: term}
]

所以在你的头部渲染方法中，你可以像这样把它们放进去：

constructor(props) {
    super(props);
    this.state = {
        headers: headers,
    }
},

sortAlg(arr) {
    //Choose one, make one
},

render() {
this.sortAlg(this.state.headers);
var headerArr = [];
headers.forEach(function(header) {
    headerArr.push(<YourHeader header = {header} />
});
return (
  <table className="table table-bordered table-condensed">
    <thead>
        {headerArr}
    </thead>
    <CourseList courseData={this.props.courses}/>
  </table>
);

<YourHeader />是您为更好地控制而制作的组件。 至少我喜欢这样做。

我希望这会有所帮助，祝你好运。

Answer 2

如果我很好地理解了问题和您的数据结构，您可以将使用getUniqueTerms计算的成绩传递给CourseList组件。

所以在CourseTable.js ：

render() {
    let grades = this.uniqueTerms(this.props.courses);
    let headers = this.createGradesHeaders(grades);
    // and then in your jsx
    <CourseList courseData={ this.props.courses } grades={ grades } />
}

在Course组件的render方法中：

{
    this.props.grades.map( grade =>
        <td key={ grade }>
            // whatever data you need to print from this.props.courseData.grades[grade]
        </td>
    )
}

希望能帮助到你！