在Next.js 13中使用react-window实现全高滚动条与全局布局集成

// Wrapper.jsx
import React from 'react';
import { FixedSizeList } from 'react-window';
import InfiniteLoader from 'react-window-infinite-loader';
import styles from './Wrapper.module.css'; // 引入CSS模块

function Wrapper({ hasNextPage, isNextPageLoading, items, loadNextPage }) {
  const itemCount = hasNextPage ? items.length + 1 : items.length;
  const loadMoreItems = isNextPageLoading ? () => {} : loadNextPage;
  const isItemLoaded = (index) => !hasNextPage || index < items.length;

  const Item = ({ index, style }) => { // style prop is important for react-window
    let content;
    if (!isItemLoaded(index)) {
      content = "Loading...";
    } else {
      content = items[index].name.first; // 假设items[index]有name.first属性
    }

    return (
      <div className={styles.item} style={style}>
        {content}
      </div>
    );
  };

  const [size, setSize] = React.useState([0, 0]);

  React.useEffect(() => {
    // 客户端渲染时获取窗口尺寸
    setSize([window.innerWidth, window.innerHeight]);
    const handleResize = () => setSize([window.innerWidth, window.innerHeight]);
    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[1]} // 使用窗口高度
            width={size[0]}  // 使用窗口宽度
            itemSize={35}
          >
            {Item}
          </FixedSizeList>
        )}
      </InfiniteLoader>
    </div>
  );
}

export default Wrapper;

/* Wrapper.module.css */
.container {
  position: absolute;
  inset: 0; /* 占据整个父容器 */
  display: flex;
  flex-direction: column;
}

.item {
  max-width: 1920px;
  margin: 0 auto; /* 居中内容 */
  padding: 10px; /* 示例 */
  box-sizing: border-box; /* 确保padding不超出宽度 */
}

// components/Nav.jsx
const Nav = () => (
  <nav style={{ padding: '20px', background: '#f0f0f0', textAlign: 'center' }}>
    <h1>我的新闻应用</h1>
    {/* 导航链接等 */}
  </nav>
);
export default Nav;

// components/Footer.jsx
const Footer = () => (
  <footer style={{ padding: '20px', background: '#e0e0e0', textAlign: 'center', marginTop: '50px' }}>
    <p>&copy; 2023 我的应用. All rights reserved.</p>
  </footer>
);
export default Footer;

// Wrapper.jsx (修改后的部分)
import React from 'react';
import { FixedSizeList } from 'react-window';
import InfiniteLoader from 'react-window-infinite-loader';
import Nav from './Nav'; // 引入Nav组件
import Footer from './Footer'; // 引入Footer组件
import styles from './Wrapper.module.css';

// 假设 Article 是一个用于渲染新闻内容的组件
const Article = ({ item }) => (
  <div style={{ padding: '15px', borderBottom: '1px solid #eee' }}>
    <h3>{item.name.first} {item.name.last}</h3> {/* 示例内容 */}
    <p>这是一篇关于 {item.name.first} 的新闻内容摘要。</p>
  </div>
);

function Wrapper({ hasNextPage, isNextPageLoading, items, loadNextPage }) {
  // itemCount 仍然是数据项的数量。如果Nav和Footer是额外独立的项，则需要调整。
  // 但在此方案中，它们是依附于第一个和最后一个数据项渲染的。
  const itemCount = hasNextPage ? items.length + 1 : items.length;

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

  // 检查项是否已加载。对于InfiniteLoader，最后一个项可能用于显示“加载更多”。
  const isItemLoaded = (index) => !hasNextPage || index < items.length;

  // 关键修改：Item 渲染逻辑
  const Item = ({ index, style }) => {
    // style prop 必须传递给 react-window 渲染的每个子元素
    if (!isItemLoaded(index)) {
      return (
        <div className={styles.item} style={style}>
          Loading...
        </div>
      );
    }

    // 渲染第一个数据项时，在其之前添加导航栏
    if (index === 0) {
      return (
        <div className={styles.item} style={style}>
          <Nav /> {/* 导航栏 */}
          <Article item={items[index]} /> {/* 第一个新闻内容 */}
        </div>
      );
    }

    // 渲染最后一个数据项时，在其之后添加页脚
    // 注意：如果 InfiniteLoader 增加了 itemCount，那么 items.length - 1 可能是实际的最后一个数据项
    // 而 itemCount - 1 可能是“加载中”指示器。这里假设 items.length - 1 是最后一个实际数据项。
    if (index === items.length - 1) {
      return (
        <div className={styles.item} style={style}>
          <Article item={items[index]} /> {/* 最后一个新闻内容 */}
          <Footer /> {/* 页脚 */}
        </div>
      );
    }

    // 渲染普通数据项
    return (
      <div className={styles.item} style={style}>
        <Article item={items[index]} />
      </div>
    );
  };

  // 调整 FixedSizeList 的高度和宽度
  // 在这种方案下，FixedSizeList 应该占据其父容器的全部可用空间
  // 父容器可以设置为 100vh，或者通过 flexbox 占据剩余空间
  return (
    <div className={styles.fullHeightContainer}> {/* 新的容器样式 */}
      <InfiniteLoader
        isItemLoaded={isItemLoaded}
        itemCount={itemCount}
        loadMoreItems={loadMoreItems}
      >
        {({ onItemsRendered, ref }) => (
          <FixedSizeList
            itemCount={itemCount}
            onItemsRendered={onItemsRendered}
            ref={ref}
            height="100%" // 占据父容器的100%高度
            width="100%"  // 占据父容器的100%宽度
            itemSize={100} // 调整 itemSize 以适应包含 Nav/Footer 的项，可能需要动态计算
          >
            {Item}
          </FixedSizeList>
        )}
      </InfiniteLoader>
    </div>
  );
}

export default Wrapper;

/* Wrapper.module.css (修改后的部分) */
/* .container 不再需要 position: absolute; inset: 0; */
/* 而是使用一个占据全高的新容器 */
.fullHeightContainer {
  height: 100vh; /* 使容器占据整个视口高度 */
  display: flex; /* 可选，如果需要进一步布局 */
  flex-direction: column;
}

.item {
  max-width: 1920px; /* 内容最大宽度 */
  margin: 0 auto; /* 内容居中 */
  width: 100%; /* 确保 item 占据父容器的全部宽度 */
  box-sizing: border-box;
}