Next.js 13应用中集成react-window与全局布局元素的策略

// components/Nav.js
import React from 'react';
import styles from './Nav.module.css';

export default function Nav() {
  return <nav className={styles.nav}> {/* Your navigation content */} </nav>;
}

// components/Footer.js
import React from 'react';
import styles from './Footer.module.css';

export default function Footer() {
  return <footer className={styles.footer}> {/* Your footer content */} </footer>;
}

// components/Article.js (assuming each item is an article)
import React from 'react';
import styles from './Article.module.css';

export default function Article({ item }) {
  return <div className={styles.article}>
    <h3>{item.name.first}</h3> {/* Example content */}
    {/* More article details */}
  </div>;
}

import React from 'react';
import { FixedSizeList, InfiniteLoader } from 'react-window';
import Nav from './Nav'; // 导入你的导航组件
import Footer from './Footer'; // 导入你的页脚组件
import Article from './Article'; // 导入你的文章内容组件
import styles from './your-page.module.css'; // 你的页面CSS

function Wrapper({ hasNextPage, isNextPageLoading, items, loadNextPage }) {
  // itemCount 应该反映所有虚拟化项的总数，包括数据项和嵌入的Nav/Footer
  // 如果Nav和Footer是额外添加的，则需要调整 itemCount
  // 在此示例中，我们假设Nav和Footer是替换或包裹了第一个和最后一个数据项
  // 所以 itemCount 仍然是数据项的数量（+1用于加载指示器）
  const itemCount = hasNextPage ? items.length + 1 : items.length;

  const loadMoreItems = isNextPageLoading ? () => {} : loadNextPage;

  const isItemLoaded = (index) => !hasNextPage || index < items.length;

  // Item 渲染组件
  const Item = ({ index, style }) => {
    // 确保将 style prop 应用到最外层元素，这对于 react-window 的定位至关重要
    if (!isItemLoaded(index)) {
      return (
        <div style={style} className={styles.item}>
          Loading...
        </div>
      );
    }

    // 渲染实际的文章内容
    const articleContent = <Article item={items[index]} />;

    // 如果是第一个数据项，在其前面渲染导航
    if (index === 0) {
      return (
        <div style={style} className={styles.item}>
          <Nav />
          {articleContent}
        </div>
      );
    }

    // 如果是最后一个数据项，在其后面渲染页脚
    // 注意：这里的 items.length - 1 是指数据数组中的最后一个索引
    // 如果有加载指示器，实际的最后一个渲染项可能是加载指示器
    if (index === items.length - 1 && !hasNextPage) { // 确保是真正的最后一个数据项且没有更多数据
      return (
        <div style={style} className={styles.item}>
          {articleContent}
          <Footer />
        </div>
      );
    }

    // 其他情况只渲染文章内容
    return (
      <div style={style} className={styles.item}>
        {articleContent}
      </div>
    );
  };

  // 响应式尺寸调整
  const [size, setSize] = React.useState({ width: 0, height: 0 });

  React.useEffect(() => {
    const handleResize = () => {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    };
    // 首次加载时设置尺寸
    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return (
    <div className={styles.container}>
      <InfiniteLoader
        isItemLoaded={isItemLoaded}
        itemCount={itemCount}
        loadMoreItems={loadMoreItems}
      >
        {({ onItemsRendered, ref }) => (
          <FixedSizeList
            itemCount={itemCount}
            onItemsRendered={onItemsRendered}
            ref={ref}
            height={size.height} // 设置为视口高度，让虚拟列表占据整个视口
            width={size.width}   // 设置为视口宽度
            itemSize={150}       // 示例：根据你的内容调整此值
          >
            {Item}
          </FixedSizeList>
        )}
      </InfiniteLoader>
    </div>
  );
}

export default Wrapper;

/* your-page.module.css */
.container {
  /* 确保容器占据可用空间，并允许其内部的 FixedSizeList 填充 */
  /* 如果希望列表占据整个视口，可以设置为相对定位或直接由父级控制 */
  /* 这里的示例是让它成为一个常规的块级元素 */
  width: 100vw;
  height: 100vh;
  overflow: hidden; /* 隐藏容器自身的滚动条，让 FixedSizeList 接管 */
}

.item {
  max-width: 1920px; /* 限制内容宽度 */
  margin: 0 auto;    /* 居中内容 */
  padding: 1rem;     /* 示例内边距 */
  box-sizing: border-box; /* 确保 padding 不会增加总宽度 */
  /* 其他样式 */
}

/* Nav.module.css */
.nav {
  background-color: #f0f0f0;
  padding: 1rem;
  text-align: center;
  /* 确保 Nav 组件自身不会有固定定位或影响父级布局 */
}

/* Footer.module.css */
.footer {
  background-color: #e0e0e0;
  padding: 1rem;
  text-align: center;
  /* 确保 Footer 组件自身不会有固定定位或影响父级布局 */
}

/* Article.module.css */
.article {
  /* 你的文章样式 */
  border-bottom: 1px solid #eee;
  padding: 1rem 0;
}