如何从json输入react呈现表

Question

我正在从DB渲染Json，并希望在交互式表中显示Json。

使用react 17.0.1版本

[
{
"Sno": "1",
"First Name": "name",
"Last Name": "las2t name",
"Email": "[e-mail]",
"Amount": "2000"
},
{
"Sno": "1",
"First Name": "first name",
"Last Name": "last name",
"Email": "[e-mail]",
"Amount": "2000"
}
]

Answer 1

您可以将数据作为数组获取，并将其映射到自定义HTML表中，或者使用任何反应表。你可以这样做。

假设你的数据是从数据库的data[]数组中获取的，然后你可以像这样映射

{data.map((l, i) => (
<table style="width:100%">
<tr>
<th>Sno</th>
<th>First Name</th>
<th>Last Name</th> 
<th>Email</th>
<th>Amount</th>
</tr>
<tr>
<td>{l.sno}</td>
<td>{l.FirstName}</td>
<td>{l.LastName}</td>
<td>{l.Email}</td>
<td>{l.Amount}</td>
</tr>
</table>
))}

Answer 2

解析数据并在客户端呈现数据留给开发人员处理。React不会为我们做这些。您可以使用react-table，您可以根据需要进行少量配置。