Reactに動的ヘッダーを含むテーブルにhtmlテーブルのセルデータを動的に挿入するにはどうすればよいですか？

Question

私が作成してい動的<thead><table>の中に挿入された列ヘッダーの一連有するReact 0.14.6と<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>のこのセクションのヘッダーが動的に生成されています。私はどのように各グレードのデータを対応する列に挿入/挿入するのか混乱しています。

動的に生成される<th>ヘッダー要素のそれぞれを何とか識別する必要があると思います。これらの列に挿入すると参照する方法がわかりません。

Answer 1

コメントに記載されているように、状態を使用する必要があります。州は非常に便利です。 ReactJS states新しいヘッダーをpidgeonholeしたい場合は、IDを割り当てることができます。これにより、新しいヘッダーをレンダリングするときに正しく循環させることができます。前述のように、反応は状態の変化を再描画します。これについては、facebookチュートリアルのページやドキュメントにいくつか例があります。

オブジェクト内のすべてのヘッダーを収集すると、データベースからオブジェクトが取得されている可能性があります。

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 />は、あなたがよりよい制御のために作るの成分である：

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

だから頭のあなたのレンダリング方法であなたは、このようにそれらを置くことができます。どのように私はそれをやりたい、atleast。

私はこれが幸運に役立つことを望みます。

Answer 2

質問とデータ構造がよく分かったら、getUniqueTermsで計算した成績をCourseListコンポーネントに渡すことができます。 CourseTable.js中のSO

：

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> 
    ) 
} 

はそれが役に立てば幸い！