react 动态显示table列表
时间: 2023-08-19 18:03:35 浏览: 56
在React中动态显示表格列表可以使用组件和状态来实现。以下是一个简单的示例:
首先,创建一个名为Table的组件:
```jsx
import React from 'react';
const Table = ({ data }) => {
return (
<table>
<thead>
<tr>
<th>名称</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
{data.map((item, index) => (
<tr key={index}>
<td>{item.name}</td>
<td>{item.age}</td>
</tr>
))}
</tbody>
</table>
);
};
export default Table;
```
然后,在父组件中定义数据列表和状态:
```jsx
import React, { useState } from 'react';
import Table from './Table';
const App = () => {
const [data, setData] = useState([
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Bob', age: 35 },
]);
return (
<div>
<h1>表格列表</h1>
<Table data={data} />
</div>
);
};
export default App;
```
在上述示例中,我们通过useState钩子来定义一个名为data的状态,初始值为包含三个对象的数组。然后将该状态作为props传递给Table组件。在Table组件中,我们使用map函数遍历数据数组,并动态生成表格行。
这样,当App组件渲染时,它会显示一个标题和动态生成的表格列表。
请注意,这只是一个简单的示例,你可以根据自己的需求进行调整和扩展。希望对你有所帮助!