[英]How do I dynamically insert html table cell data into a table with dynamic headers in React?
I'm creating a <table>
with React 0.14.6
that has a series of column headers that are dynamically inserted into a <thead>
of a <table>
: 我正在创建一个带有
React 0.14.6
的<table>
,它有一系列列标题,动态插入到<table>
的<thead>
中:
CourseTable.js
: 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
: GradesHeader.js
:
import React, {Component} from 'react';
export default class GradesHeader extends Component {
render() {
return (
<div>
{this.props.headerText}
</div>
);
}
}
Course.js
: 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>
);
}
}
You can see in CourseTable.js
where I'm dynamically generating the headers for this section of the table's <thead>
. 你可以在
CourseTable.js
中看到我动态生成表格<thead>
这一部分的标题。 I'm confused on how to insert/pidgeonhole the data for each grade into the corresponding column. 我对如何将每个等级的数据/ pidgeonhole插入相应的列感到困惑。
I think I need to somehow identify each of the <th>
header elements that are dynamically generated, and reference those when I insert into those columns, but I'm not sure how. 我想我需要以某种方式识别动态生成的每个
<th>
头元素,并在插入这些列时引用它们,但我不确定如何。
You should, as mentioned in a comment, use states. 正如评论中所提到的,您应该使用状态。 States are pretty useful.
各州非常有用。 ReactJS states If you want to pidgeonhole new headers you could assign them with an ID, so that you could cycle through them correctly when rendering a new.
ReactJS状态如果你想要pidgeonhole新标题,你可以为它们分配一个ID,这样你就可以在渲染新的时正确地循环它们。 As mentioned, react re-renders on state change.
如上所述,反应会重新呈现状态变化。 There are a few examples of this in facebooks tutorial page and also in the documentation.
在facebooks教程页面和文档中都有一些这样的例子。
Say you gather all your headers in an object, or perhaps they are coming from a database. 假设您在对象中收集所有标题,或者它们可能来自数据库。
var headers = [{id: 0, name: grade}
{id: 1, name: term}
]
So in your render method of heads you can put them in like this: 所以在你的头部渲染方法中,你可以像这样把它们放进去:
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>
);
The <YourHeader />
is a component you make for better control. <YourHeader />
是您为更好地控制而制作的组件。 How I like doing it, atleast. 至少我喜欢这样做。
I hope this helps, good luck. 我希望这会有所帮助,祝你好运。
If I understand well the question and your data structure, you could pass the grades computed with getUniqueTerms
to your CourseList
component. 如果我很好地理解了问题和您的数据结构,您可以将使用
getUniqueTerms
计算的成绩传递给CourseList
组件。
So in CourseTable.js
: 所以在
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 } />
}
And in the render
method of your Course
component : 在
Course
组件的render
方法中:
{
this.props.grades.map( grade =>
<td key={ grade }>
// whatever data you need to print from this.props.courseData.grades[grade]
</td>
)
}
Hope it helps! 希望能帮助到你!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.