Question

我目前正在研究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;

Answer 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文件中。

格式化一个从JSON文件接收数据的React表

1 个答案: