如何从对象数组动态创建jsx表？

import React from 'react';

function DynamicTable({ data }) {
  // 遍历对象数组，创建表格行
  const tableRows = data.map((item, index) => {
    // 根据对象的属性，创建表格单元格
    const tableCells = Object.values(item).map((value, i) => (
      <td key={i}>{value}</td>
    ));

    // 返回表格行
    return <tr key={index}>{tableCells}</tr>;
  });

  // 渲染结果
  return (
    <table>
      <thead>
        <tr>
          {/* 表格头部 */}
          {Object.keys(data[0]).map((key, index) => (
            <th key={index}>{key}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {/* 表格内容 */}
        {tableRows}
      </tbody>
    </table>
  );
}

export default DynamicTable;