使用React.js返回动态表

Question

我试图使用react创建动态表。 这是我到目前为止所拥有的...

datatable.js

import React from 'react'
import data from '../data/customerData.json'
import '../styles/dataTable.css'



const DataTable = () => {
    return (
        <div>
          {data.map(dat => {
            return (
                <div>
                    <table className='data-table-container'>
                        <tr>
                            <th>Customer Name</th>
                            <th>Phone Number</th>
                            <th>Loan Vehicle</th>
                            <th>Time Out</th>
                            <th>Time Due</th>
                        </tr>
                        <tr>
                            <td>{dat.CustomerName}</td>
                            <td>{dat.PhoneNumber}</td>
                            <td>{dat.LoanVehicle}</td>
                            <td>{dat.TimeOut}</td>
                            <td>{dat.TimeDue}</td>
                        </tr>
                    </table>
                </div>
            );
          })}
        </div>
      );
    }

export default DataTable

home.js

import React, { useState } from 'react';
import Calendar from 'react-calendar';
import DataTable from '../components/DataTable';
import '../styles/calendar.css'




const Home = () => {
  const [value, onChange] = useState(new Date());
  let today = new Date().toDateString()
  return (
    <>
      <div className='date-display'>
        <h3 className='current-date-display'>{today}</h3>
      </div>
      <Calendar onChange={onChange} value={value} />
      <DataTable/>
    </>
  )
}

export default Home

这是浏览器中呈现的。

因此，当前在我的dataTable.js Component中，我正在使用.map在data in customerdata.json中循环循环。我遇到的问题是，您可以从屏幕截图IMG中看到＆lt; th＆gt;标签在每个循环中呈现的标签。 我的问题是如何一次显示＆lt; th＆gt;标签，并保留循环以显示＆lt; td＆gt;标签内容。 请参阅下面的预期输出。

Answer 1

您正在循环中创建许多桌子。而不是在.map（）主体中输出整个表，而只输出行。将其他所有内容保持在该循环外：

return (
    <div>
        <div>
            <table className='data-table-container'>
                <tr>
                    <th>Customer Name</th>
                    <th>Phone Number</th>
                    <th>Loan Vehicle</th>
                    <th>Time Out</th>
                    <th>Time Due</th>
                </tr>
                {data.map(dat => {
                  return (
                    <tr>
                        <td>{dat.CustomerName}</td>
                        <td>{dat.PhoneNumber}</td>
                        <td>{dat.LoanVehicle}</td>
                        <td>{dat.TimeOut}</td>
                        <td>{dat.TimeDue}</td>
                    </tr>
                  );
                })}
            </table>
        </div>
    </div>
  );

＆lt; tbody＆gt; elements明确地使其更加清楚自己。

return (
    <div>
        <div>
            <table className='data-table-container'>
                <thead>
                    <tr>
                        <th>Customer Name</th>
                        <th>Phone Number</th>
                        <th>Loan Vehicle</th>
                        <th>Time Out</th>
                        <th>Time Due</th>
                    </tr>
                </thead>
                <tbody>
                    {data.map(dat => {
                      return (
                        <tr>
                            <td>{dat.CustomerName}</td>
                            <td>{dat.PhoneNumber}</td>
                            <td>{dat.LoanVehicle}</td>
                            <td>{dat.TimeOut}</td>
                            <td>{dat.TimeDue}</td>
                        </tr>
                      );
                    })}
                </tbody>
            </table>
        </div>
    </div>
  );

您可以通过明确分开＆lt; thead＆gt; and 当没有数据显示时，添加默认的“无记录”行，只是为了获得更多用户体验：

return (
    <div>
        <div>
            <table className='data-table-container'>
                <thead>
                    <tr>
                        <th>Customer Name</th>
                        <th>Phone Number</th>
                        <th>Loan Vehicle</th>
                        <th>Time Out</th>
                        <th>Time Due</th>
                    </tr>
                </thead>
                <tbody>
                    {data.length > 0 ? data.map(dat => {
                      return (
                        <tr>
                            <td>{dat.CustomerName}</td>
                            <td>{dat.PhoneNumber}</td>
                            <td>{dat.LoanVehicle}</td>
                            <td>{dat.TimeOut}</td>
                            <td>{dat.TimeDue}</td>
                        </tr>
                      );
                    }) : <tr><td colspan="5">No records found</td></tr>}
                </tbody>
            </table>
        </div>
    </div>
  );