在
React 中展示
JSON 格式数据到一个表格里面，可以通过以下步骤实现：
1. 定义一个组件，例如 `Table`，用于展示表格
数据。
2. 在组件中定义一个状态，例如 `data`，用于保存从外部传入的
JSON 格式数据。
3. 在组件的 `render()` 方法中，将
JSON 数据转化为 JSX 代码，生成表格的表头和表格内容，并返回表格的 JSX 代码。
以下是示例代码：
```javascript
import
React, { Component } from '
react';
class Table extends Component {
constructor(props) {
super(props);
this.state = {
data: props.data // 保存从外部传入的
JSON 数据到组件状态中
};
}
render() {
const { data } = this.state; // 从组件状态中获取
JSON 数据
if (!data || !data.length) {
return null; // 如果
JSON 数据为空，则返回空
}
// 生成表头
const columns = Object.keys(data[0]);
const tableHeader = columns.map((column, index) => (
<th key={index}>{column}</th>
));
// 生成表格内容
const tableBody = data.map((row, index) => (
<tr key={index}>
{columns.map((column, index) => (
<td key={index}>{row[column]}</td>
))}
</tr>
));
// 返回表格的 JSX 代码
return (
<table>
<thead>
<tr>{tableHeader}</tr>
</thead>
<tbody>{tableBody}</tbody>
</table>
);
}
}
export default Table;
```
以上代码中，`data` 是从外部传入的
JSON 格式数据，通过 `this.state` 将其保存到组件状态中。在 `render()` 方法中，先判断传入的
JSON 数据是否为空，如果为空则返回空。然后生成表头和表格内容的 JSX 代码，并返回完整的表格的 JSX 代码。最后通过 `export default Table` 将组件导出，可以在其他组件中引入并
使用。例如：
```javascript
import
React, { Component } from '
react';
import Table from './Table';
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{ name: 'Alice', age: 20, gender: 'Female' },
{ name: 'Bob', age: 25, gender: 'Male' },
{ name: 'Charlie', age: 30, gender: 'Male' },
] // 定义
JSON 格式数据
};
}
render() {
const { data } = this.state; // 从组件状态中获取
JSON 数据
return (
<div>
<Table data={data} /> // 将
JSON 数据传递给表格组件
</div>
);
}
}
export default App;
```
以上代码中，在 `App` 组件中定义了
JSON 格式数据，并将其传递给 `Table` 组件。在 `Table` 组件中，通过 `this.props.data` 获取传入的
JSON 数据。
745
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
