实现export一个新的 React 组件TableHeader，它将代表任何表的标题行。这个类应该期待一个prop调用cols，它是一个列名数组（作为字符串）。该类应呈现<thead>包含<tr>（表格行）的（表格头）元素。里面<tr>应该是一组<th>（表格标题）元素，一个用于cols道具中的每个字符串。
使用该.map()函数将colsprop 转换为<th>DOM 元素数组（使用 JSX 和内联表达式），然后将该数组包含在返回的 DOM 元素中。
一定要给每个<th>元素一个key属性（列名字符串是一个很好的值），以便 React 可以跟踪它。
在TableHeader类呈现的 DOM 中包含类的实例SenatorTable（作为 的子项<table>）。的SenatorTable类应通过TableHeader它创建一个cols支柱即阵列['Name', 'State', 'Phone', 'Twitter']。
这应该会导致标题行出现在表格中（具有正确的 4 列）。
然而，这是我已经尝试过的；我不明白我如何使用道具并使其正确渲染。
export class TableHeader extends Component {
render() {
let colItems = this.props.cols.map((colName) => {
return <th message={colName} key={colName}/>;
});
return (
<thead>
<tr>
{colItems}
</tr>
</thead>
)
}
}
该th标签没有消息属性。
您需要将列名包裹在开始和结束th标记中
let colItems = this.props.cols.map((colName) => {
return <th key={colName}>{colName}</th>;
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句