Question

我有一些代码可以在表上显示一些数据，并添加新的<tr><td>...

当前仅显示名称为....的一项。

参见下文：

<tbody>
  {
     props.names.map( ({name}, i) => <tr key={i}><td>{ name }</td></tr> )
  }
</tbody>

例如，如果我还有更多项目要显示...

id, name, lastname etc

例如：

<td>{ id }</td>
<td>{ name }</td>
<td>{ lastname }</td>

如何修改上面的代码，这样我才能做到？

Answer 1

如果名称是具有许多名称对象的数组。例如，如果单个名称对象看起来像这样？ {“ id”：1，“ name”：“ Tim Ering”，“ lastname”：“ Ering”}

尝试一下？

props.names.map( (nameObj, i) => ( 
<tr key={i}>
   <td>{ nameObj.id }</td>
   <td>{ nameObj.name }</td>
   <td>{ nameObj.lastname }</td>
 </tr> 
))

但是我不知道为什么只是道具。我以为是this.props.names

Answer 2

我认为您可以尝试：

props.names.map( ({id, name, lastname}, i) => ( 
    <tr key={i}>
       <td>{ id }</td>
       <td>{ name }</td>
       <td>{ lastname }</td>
     </tr> 
  ))
)

此外，这看起来像是React Js，而不是JavaScript，您应该更改标签以获取更多相关的响应/帮助！

显示多个项目的Javascript地图

2 个答案: