在传递数据时在循环中创建多个模态

// 示例代码：使用React和react-window进行虚拟化
import React from 'react';
import { FixedSizeList as List } from 'react-window';

const ModalList = ({ items }) => (
  <List
    height={400}
    itemCount={items.length}
    itemSize={150}
    width={300}
  >
    {({ index, style }) => (
      <div style={style}>
        {/* 渲染单个模态 */}
        <Modal item={items[index]} />
      </div>
    )}
  </List>
);

// 示例代码：React中的模态组件
import React, { useEffect } from 'react';

const Modal = ({ item, onClose }) => {
  useEffect(() => {
    // 组件挂载时的操作
    return () => {
      // 组件卸载时的清理操作
      console.log('Modal destroyed');
    };
  }, []);

  return (
    <div className="modal">
      <h2>{item.title}</h2>
      <p>{item.content}</p>
      <button onClick={onClose}>Close</button>
    </div>
  );
};

/* 示例代码：使用CSS模块 */
.modal {
  /* 全局样式 */
}

.modal__unique-id {
  /* 特定模态的样式 */
}