React JS新手求助：如何为无数据库连接的简单表格添加列名

嘿，作为React新手能写出这样的代码已经很棒啦！你现在的问题主要是缺少表格的表头（列名）部分，而且浏览器默认的表格样式比较朴素，导致看起来像纯文本。我给你两个超简单的实现方案，马上就能解决问题：

方案1：直接在表格里添加表头 #

你只需要在<table>标签里、<tbody>之前加上<thead>标签，里面放一行表头单元格（<th>）就行。另外可以加一点点基础样式，让表格的行列更清晰：

修改后的App组件render部分：

render() {
  return (
    <div>
      <Header/>
      <table style={{borderCollapse: 'collapse', width: '100%'}}>
        {/* 新增的表头部分 */}
        <thead>
          <tr style={{backgroundColor: '#f2f2f2'}}>
            <th style={{border: '1px solid #ddd', padding: '8px', textAlign: 'left'}}>ID</th>
            <th style={{border: '1px solid #ddd', padding: '8px', textAlign: 'left'}}>Name</th>
            <th style={{border: '1px solid #ddd', padding: '8px', textAlign: 'left'}}>Age</th>
          </tr>
        </thead>
        <tbody>
          {this.state.data.map((person, i) => <TableRow key={i} data={person}/>)}
        </tbody>
      </table>
    </div>
  );
}

同时修改TableRow组件的<td>样式，让单元格和表头对齐：

class TableRow extends React.Component {
  render() {
    return (
      <tr>
        <td style={{border: '1px solid #ddd', padding: '8px'}}>{this.props.data.id}</td>
        <td style={{border: '1px solid #ddd', padding: '8px'}}>{this.props.data.name}</td>
        <td style={{border: '1px solid #ddd', padding: '8px'}}>{this.props.data.age}</td>
      </tr>
    );
  }
}

这样一来，表格就会显示清晰的列名，而且边框和内边距会让表格结构一目了然。

方案2：把表头做成独立组件（更符合React组件化思想） #

如果以后想单独修改表头样式或逻辑，可以把表头抽成一个单独的组件：

class TableHeader extends React.Component {
  render() {
    const headerStyle = {
      backgroundColor: '#f2f2f2'
    };
    const cellStyle = {
      border: '1px solid #ddd',
      padding: '8px',
      textAlign: 'left'
    };
    return (
      <thead>
        <tr style={headerStyle}>
          <th style={cellStyle}>ID</th>
          <th style={cellStyle}>Name</th>
          <th style={cellStyle}>Age</th>
        </tr>
      </thead>
    );
  }
}

然后在App组件的<table>里直接使用这个组件：

<table style={{borderCollapse: 'collapse', width: '100%'}}>
  <TableHeader />
  <tbody>
    {this.state.data.map((person, i) => <TableRow key={i} data={person}/>)}
  </tbody>
</table>

这个方式更灵活，适合后续扩展功能。

两种方案都能快速解决你的问题，选哪个都可以～

内容的提问来源于stack exchange，提问作者Magdalena Rumakowicz