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

【问题标题】：How to render DOM using props in React?如何在 React 中使用 props 渲染 DOM？
【发布时间】：2019-05-20 09:47:12
【问题描述】：

实现并export 一个新的 React 组件 TableHeader，它将代表 any 表的标题行。这个类应该期待一个名为 cols 的 prop，它是一个列名（作为字符串）的 array。该类应呈现包含<tr>（表行）的<thead>（表头）元素。 <tr> 内部应该是一组 <th>（表格标题）元素，每个元素对应 cols 属性中的每个字符串。

使用.map() 函数将cols 属性转换为<th> DOM 元素的数组（使用JSX 和内联表达式），然后将此数组包含在返回的DOM 元素中.

确保给每个<th> 元素一个key 属性（列名字符串是一个很好的值），以便React 可以跟踪它。

在由SenatorTable 类（作为<table> 的子级）呈现的DOM 中包含TableHeader 类的实例。 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>
    )
  }
}

【问题讨论】：

只要你使用正确的 props 调用 Tableheader，这段代码就可以工作。
您不需要剪切和粘贴整个作业文本，只需要剪切粘贴的部分即可。你不说实际发生了什么。乍一看还不错。

标签： reactjs react-props

【解决方案1】：

th 标签没有消息属性。

您需要将列名包装在一个开始和结束th 标记中

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

【讨论】：