React JS -如何使用组件显示数据集？

import React from 'react';

class DataDisplay extends React.Component {
  render() {
    // 假设数据集是一个包含多个对象的数组
    const data = [
      { id: 1, name: 'John' },
      { id: 2, name: 'Jane' },
      { id: 3, name: 'Bob' }
    ];

    // 使用map函数遍历数据集，并为每个对象创建一个组件
    const dataComponents = data.map(item => (
      <div key={item.id}>
        <span>ID: {item.id}</span>
        <span>Name: {item.name}</span>
      </div>
    ));

    // 返回包含所有数据组件的父组件
    return <div>{dataComponents}</div>;
  }
}

export default DataDisplay;

import React from 'react';
import DataDisplay from './DataDisplay';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Data Display</h1>
        <DataDisplay />
      </div>
    );
  }
}

export default App;