javascript - 如何在 React 中将 html 表格单元格数据动态插入到具有动态标题的表格中？

Question

我正在创建一个 <table>与 React 0.14.6具有一系列动态插入到 <thead> 中的列标题的 <table> :

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>动态生成的 header 元素，并在我插入这些列时引用这些元素，但我不确定如何操作。

Answer 1

如评论中所述，您应该使用状态。状态非常有用。 ReactJS states如果你想 pidgeonhole 新的标题，你可以为它们分配一个 ID，这样你就可以在渲染新标题时正确地循环浏览它们。如前所述，React 在状态变化时重新渲染。在 facebooks 教程页面和文档中有一些这方面的示例。

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

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 />是您为更好地控制而制作的组件。至少我喜欢这样做。

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