javascript - 在 react 服务器端渲染的应用程序中启用滚动

Question

您好，我正在将 React 应用程序从客户端渲染(CSR)迁移到服务器端渲染(SSR)。我在 csr 中实现了下面的代码，以便在滚动到页面末尾时加载更多内容。我遇到的问题是，在将代码迁移到 ssr 后，它现在给出一个错误“ReferenceError:窗口未定义”。我如何重构代码，以便滚动位置在 react 服务器端渲染的应用程序中工作？

在 csr 中实现的代码，可实现滚动

export class AllCourses extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {

    };
    this.handleScroll();
  }

 .....

  handleScroll() {
    window.onscroll = () => {

      const nextPage = this.props.nextPage;
      if (
        window.innerHeight + document.documentElement.scrollTop ===
        document.documentElement.offsetHeight
      ) {
        this.props.dispatch(retrieveAllCourses(nextPage));
      }
    };
  }

Answer 1

您可以将 handleScroll 函数中的逻辑移至 useEffect 回调中，因为当组件呈现时，window 变量可用。

所以你会这样做:

componentDidMount() {
  if (typeof window !== 'undefined') {
    window.onscroll = () => {

      const nextPage = this.props.nextPage;
      if (
        window.innerHeight + document.documentElement.scrollTop ===
        document.documentElement.offsetHeight
      ) {
        this.props.dispatch(retrieveAllCourses(nextPage));
      }
    };
  }
}