具有嵌套子对象的动态嵌套折叠

// 示例代码：使用React实现嵌套折叠
import React, { useState } from 'react';

const NestedItem = ({ item }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <div onClick={() => setIsOpen(!isOpen)}>
        {item.name} {item.children && (isOpen ? '[-]' : '[+]')}
      </div>
      {isOpen && item.children && (
        <div style={{ marginLeft: '20px' }}>
          {item.children.map((child, index) => (
            <NestedItem key={index} item={child} />
          ))}
        </div>
      )}
    </div>
  );
};

const NestedList = ({ data }) => {
  return (
    <div>
      {data.map((item, index) => (
        <NestedItem key={index} item={item} />
      ))}
    </div>
  );
};

export default NestedList;

// 示例代码：使用react-window实现虚拟化列表
import React, { useState } from 'react';
import { FixedSizeTree as Tree } from 'react-vtree';

const NestedList = ({ data }) => {
  const [treeData, setTreeData] = useState(data);

  return (
    <Tree
      treeWalker={function* () {
        // 实现树的遍历逻辑
      }}
      itemSize={30}
      height={500}
      width={300}
    />
  );
};

export default NestedList;