tablecontainer标签中展示json格式数据

`<TableContainer>` 标签是 Material-UI 库中的一个组件，用于包装 `<Table>` 和 `<TableHead>`、`<TableBody>`、`<TableRow>`、`<TableCell>` 等表格组件，并提供一些额外的属性和样式。要展示 JSON 格式数据，可以使用以下步骤：

1. 引入 Material-UI 库和相关组件。

import { TableContainer, Table, TableHead, TableBody, TableRow, TableCell, Paper } from '@material-ui/core';

2. 定义一个组件，例如 `MyTable`，用于展示表格数据。

3. 在组件中定义一个状态，例如 `data`，用于保存从外部传入的 JSON 格式数据。

4. 在组件的 `render()` 方法中，将 JSON 数据转化为 JSX 代码，生成表头和表格内容，并返回 `<TableContainer>`、`<Table>`、`<TableHead>`、`<TableBody>`、`<TableRow>`、`<TableCell>` 等组件的 JSX 代码。

以下是示例代码：

import React, { Component } from 'react';
import { TableContainer, Table, TableHead, TableBody, TableRow, TableCell, Paper } from '@material-ui/core';

class MyTable 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) => (
      <TableCell key={index}>{column}</TableCell>
    ));

    // 生成表格内容
    const tableBody = data.map((row, index) => (
      <TableRow key={index}>
        {columns.map((column, index) => (
          <TableCell key={index}>{row[column]}</TableCell>
        ))}
      </TableRow>
    ));

    // 返回包装了表格组件的 JSX 代码
    return (
      <TableContainer component={Paper}>
        <Table>
          <TableHead>
            <TableRow>{tableHeader}</TableRow>
          </TableHead>
          <TableBody>{tableBody}</TableBody>
        </Table>
      </TableContainer>
    );
  }
}

export default MyTable;

以上代码中，`data` 是从外部传入的 JSON 格式数据，通过 `this.state` 将其保存到组件状态中。在 `render()` 方法中，先判断传入的 JSON 数据是否为空，如果为空则返回空。然后生成表头和表格内容的 JSX 代码，并返回包装了表格组件的 JSX 代码。最后通过 `export default MyTable` 将组件导出，可以在其他组件中引入并使用。例如：

import React, { Component } from 'react';
import MyTable from './MyTable';

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>
        <MyTable data={data} /> // 将 JSON 数据传递给表格组件
      </div>
    );
  }
}

export default App;

以上代码中，在 `App` 组件中定义了 JSON 格式数据，并将其传递给 `MyTable` 组件。在 `MyTable` 组件中，通过 `this.props.data` 获取传入的 JSON 数据。