我正在创建一个 <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 元素,并在我插入这些列时引用这些元素,但我不确定如何操作。
最佳答案
如评论中所述,您应该使用状态。状态非常有用。 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 />
是您为更好地控制而制作的组件。至少我喜欢这样做。
我希望这对你有所帮助,祝你好运。
关于javascript - 如何在 React 中将 html 表格单元格数据动态插入到具有动态标题的表格中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36203267/