Question

实施和export一个新的React组件 TableHeader ，它将代表 any 表的标题行。此类应该期望一个名为 prop 的cols，它是列名的一个 array （作为字符串）。该类应呈现一个<thead>（表行）的<tr>（表头）元素。在<tr>内部应该有一组<th>（表标题）元素，在cols道具中的每个字符串中都应有一个。

使用.map()函数将cols属性转换为<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>
    )
  }
}

Answer 1

th标签没有消息属性。

您需要将列名包装在开头和结尾的th标记中

 let colItems = this.props.cols.map((colName) => {
      return <th key={colName}>{colName}</th>;
    });

如何在React中使用props渲染DOM？

1 个答案: