javascript - 格式化从 JSON 文件接收数据的 React 表

Question

我目前正在从事一个学习 React 的元素，我正在尝试显示一个表格，其中的字段是从 .json 文件中获取的值。我试图格式化表格，以便每一行和每一列都有一条线分隔，但我所能得到的只是每个单独的表格条目周围的一个框。这是我类(class)的代码:

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;

Answer 1

我认为执行以下操作更有意义。另外我会说你真正的问题不是 React 而是样式和 css。在 Web 浏览器中检查您的表格并查看 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 文件中。