React Virtualized - 单击，展开行以获取更多详细信息

React Virtualized是一个用于构建高性能可滚动列表的React组件库。它提供了一套可重用的组件，用于在大数据集合中渲染可滚动列表，并实现了一些优化技术，例如只渲染可见区域内的列表项，提供了平滑的滚动效果等。

javascript
import React, { useState } from 'react';
import { List } from 'react-virtualized';
const data = [
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Jane', age: 30 },
  { id: 3, name: 'Bob', age: 35 },
  // 更多数据...
];
const Example = () => {
  const [expandedRows, setExpandedRows] = useState([]);
  const handleRowClick = (rowIndex) => {
    const isExpanded = expandedRows.includes(rowIndex);
    if (isExpanded) {
      setExpandedRows(expandedRows.filter(row => row !== rowIndex));
    } else {
      setExpandedRows([...expandedRows, rowIndex]);
    }
  };
  const rowRenderer = ({ index, key, style }) => {
    const row = data[index];
    const isExpanded = expandedRows.includes(index);
    return (
      
        
 handleRowClick(index)}>
          {row.name}
        
        {isExpanded && (
          
            详细信息: 年龄：{row.age}
          
        )}
      
    );
  };
  return (
          width={300}
      height={400}
      rowCount={data.length}
      rowHeight={50}
      rowRenderer={rowRenderer}
    />
  );
};
export default Example;