Question

我可以通过示例{@ {1}}来呈现herader的表格用户。但是我无法渲染标题本身，例如[render]：Leanne Graham的名字。有人可以帮我吗？

{user[name]}

这是应用程序组件

 import React from 'react'

        const Users= ({ users}) => {
           return (
                 <div>
                    {users.map((user,index) => (
                       <div key={index}> 
                          <div className="container smcontainer d-flex justify-content-start"> 
                             <div className="row">
                             <div className="col-md-12">
                                <table className="table table-striped">
                                         <thead>

                                         </thead>
                                      <tbody>
                                         <tr>
                                            <td className=""> {user['id']} </td>  
                                            <td className=""> {user['name']} </td>  
                                            <td className=""> {user['username']} </td>  
                                            <td className=""> {user['email']} </td>   
                                         </tr>
                                      </tbody>
                                </table> 
                             </div> 
                          </div> 
                       </div>
                       </div>
                    ))}   
                 </div>
           )}
        export default Products

Answer 1

当您map遍历数组时，每次返回的内容都会针对数组中的每个元素返回。该代码将为每个用户创建一个全新的表。

我认为您想要做的是与映射调用分开定义列标题，然后在数组上映射以生成行：

const columns = ["ID", "Name", "Username", "Email"];

...

<div>
        <div className="container smcontainer d-flex justify-content-start"> 
           <div className="row">
            <div className="col-md-12">
               <table className="table table-striped">
                 <thead>
                    {columns.map(c => <th>{c}</th>)}
                 </thead>
                 <tbody>
                    {users.map((user, index) => (
                       <tr>
                         <td className=""> {user['id']} </td>  
                         <td className=""> {user['name']} </td>  
                         <td className=""> {user['username']} </td>  
                         <td className=""> {user['email']} </td>   
                       </tr>
                   ))}
                 </tbody>                 
                </table> 
            </div> 
          </div>
        </div>
      </div>

我制作了一个演示both ways的Codepen，但对我而言，第一个更有意义。

Answer 2

那应该给你你想要的东西。

<thead> {user['name']} <thead/>

如果您想使用Leanne Graham的名字，可以执行以下操作：

<thead> {user['name'].split(" ")[0]} <thead/>

在ReactJS中渲染表的数据头

2 个答案: