格式化从 JSON 文件接收数据的 React 表答案

【问题标题】：Formatting a React table which receives data from a JSON file格式化从 JSON 文件接收数据的 React 表
【发布时间】：2019-02-28 09:30:36
【问题描述】：

我目前正在研究一个学习 React 的项目，我正在尝试显示一个表格，其中的字段是从 .json 文件中获取的值。我正在尝试格式化表格，以便每一行和每一列都有一条线，但我所能得到的只是每个单独的表格条目周围的框。这是我的课程的代码：

import React, { Component } from 'react'
import table from '../styles/table.css'
import PostData from '../data/week1scoring.json'

class PostList extends Component {
  render() {
    return (
      <div>
        <table style={{"borderWidth":"1px", u'borderStyle':'solid'}}>
          <tr>
                <th>Team</th>
                <th>Points Scored</th>
                <th>Quarterback</th>
          </tr>
        </table>
          {PostData.map((postDetail, index)=>{
          return (
            <table style={{"borderWidth":"1px", 'borderStyle':'solid'}}>
                <tr>
                    <td>{postDetail.team}</td>
                    <td>{postDetail.points}</td>
                    <td>{postDetail.qb}</td>
                </tr>
            </table>
          )
        })}
      </div>
    );
  }
}

export default PostList;

【问题讨论】：

标签： javascript html css reactjs html-table

【解决方案1】：

我认为执行以下操作更有意义。另外我想说你真正的问题不是关于 React，而是关于样式和 css。在网络浏览器中检查您的表格并查看this 示例。

    import React, { Component } from 'react'
    import table from '../styles/table.css'
    import PostData from '../data/week1scoring.json'

    class PostList extends Component {
      render() {
        return (
          <div>
            <table style={{"borderBottom":"1px solid black","borderCollapse":"collapse";}}>
              <tr>
                    <th style={{"border": "1px solid black"}}>Team</th>
                    <th style={{"border": "1px solid black"}}>Points Scored</th>
                    <th style={{"border": "1px solid black"}}>Quarterback</th>
              </tr>
              {PostData.map((postDetail, index)=>{
              return (
                    <tr>
                        <td style={{"border": "1px solid black"}}>{postDetail.team}</td>
                        <td style={{"border": "1px solid black"}}>{postDetail.points}</td>
                        <td style={{"border": "1px solid black"}}>{postDetail.qb}</td>
                    </tr>
              )
            })}
            </table>
          </div>
        );
      }
    }

export default PostList;

一个更好的方法是添加

table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
}

到您导入的 table.css 文件中。

【讨论】：

我打算扩展 .css 文件，我只是想先确保格式正确