在React中将嵌套的json数据转换为表格格式

import React from 'react';

class JSONToTable extends React.Component {
  // 将嵌套的JSON数据转换为表格数据
  convertJSONToTableData = (json) => {
    const tableData = [];

    const convert = (data, prefix) => {
      for (const key in data) {
        const value = data[key];
        const newKey = prefix ? `${prefix}.${key}` : key;

        if (typeof value === 'object') {
          convert(value, newKey); // 递归处理嵌套的对象
        } else {
          tableData.push({ key: newKey, value });
        }
      }
    };

    convert(json, '');

    return tableData;
  };

  render() {
    const jsonData = {
      name: 'John Doe',
      age: 30,
      address: {
        street: '123 React Street',
        city: 'React City',
        state: 'React State'
      },
      hobbies: ['reading', 'coding', 'gaming']
    };

    // 将JSON数据转换为表格数据
    const tableData = this.convertJSONToTableData(jsonData);

    return (
      <table>
        <thead>
          <tr>
            <th>Key</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody>
          {tableData.map((row, index) => (
            <tr key={index}>
              <td>{row.key}</td>
              <td>{row.value.toString()}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

export default JSONToTable;