如何在React中创建列表/详细信息视图

// 列表视图组件
function ListView({ data, onItemClick }) {
  return (
    <ul>
      {data.map((item) => (
        <li key={item.id} onClick={() => onItemClick(item)}>
          {item.name}
        </li>
      ))}
    </ul>
  );
}

// 详细信息视图组件
function DetailView({ selectedItem }) {
  return (
    <div>
      {selectedItem && (
        <div>
          <h2>{selectedItem.name}</h2>
          <p>{selectedItem.description}</p>
        </div>
      )}
    </div>
  );
}

// 父组件
function App() {
  const data = [
    { id: 1, name: 'Item 1', description: 'Description of Item 1' },
    { id: 2, name: 'Item 2', description: 'Description of Item 2' },
    { id: 3, name: 'Item 3', description: 'Description of Item 3' },
  ];

  const [selectedItem, setSelectedItem] = React.useState(null);

  function handleItemClick(item) {
    setSelectedItem(item);
  }

  return (
    <div>
      <ListView data={data} onItemClick={handleItemClick} />
      <DetailView selectedItem={selectedItem} />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));