javascript - 在反应中使用json创建带有表标题的表

Question

我正在尝试获取 JSON 数据并使用它和表标题创建一个表。我已经成功完成了，但问题是表格显示不正确。

render(){
    return(
        <div className='container'>
            <table>
                <thead>
                    <tr>
                        <th>User_Name</th>
                        <th>Address</th>
                        <th>Date Of Birth</th>
                        <th>Email</th>
                        <th>Profile Picture</th>
                        <th>Edit</th>
                        <th>Delete</th>
                    </tr>
                </thead>
                <tbody>
                    {this.state.arr.map((card)=>{
                        return(
                        <div>
                            <tr>
                                <td>{card.user_name}</td>
                                <td>{card.address}</td>
                                <td>{card.date_of_birth}</td>
                                <td>{card.email}</td>
                                <td>{card.profile_picture}</td>
                                <td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Edit</button></td>
                                <td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Delete</button></td>
                            </tr>
                        </div>
                    ) })}
                </tbody>
             </table>

表格如下所示：

https://screenshots.firefox.com/7i07VlkEFYlAj8ga/mrigank.com

我希望桌子布置得当。

标签： javascriptreactjsjsx

Answer 1

当您映射数据并将其返回到<tr>时，在填充表时<td>删除<div>，因为div不能是table.