javascript - 在React Server端渲染的应用程序中启用滚动

您好，我正在将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));
      }
    };
  }

最佳答案

您可以将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));
      }
    };
  }
}

关于javascript - 在React Server端渲染的应用程序中启用滚动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59662030/