使用响应动态创建表React JS

import React from 'react';

function DynamicTable({ data }) {
  return (
    <table>
      <thead>
        <tr>
          {Object.keys(data[0]).map((key, index) => (
            <th key={index}>{key}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, rowIndex) => (
          <tr key={rowIndex}>
            {Object.values(row).map((value, cellIndex) => (
              <td key={cellIndex}>{value}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default DynamicTable;

import React from 'react';
import ReactDOM from 'react-dom';
import DynamicTable from './DynamicTable';

const data = [
  { name: 'Alice', age: 24, city: 'New York' },
  { name: 'Bob', age: 30, city: 'Los Angeles' },
  { name: 'Charlie', age: 28, city: 'Chicago' }
];

ReactDOM.render(
  <React.StrictMode>
    <DynamicTable data={data} />
  </React.StrictMode>,
  document.getElementById('root')
);