滚动时渲染下一个组件 [duplicate]-解网

问：

昨天关闭。

我有一个页面同时显示许多组件，这些组件获取数据，因此使页面加载速度非常慢。

我只想显示前 2 个组件，滚动到底部显示时，然后滚动到酒店底部时，显示等等。<Hotels /><Nightlife />

这是我现在的页面：

'use client';

import { IPageProps } from '@/app/[city]/[lang]/page';
import React from 'react';
import ToVisit from './categories/ToVisit';
import Tops from './categories/Tops';
import Restaurants from './categories/Restaurants';
import Hotels from './categories/Hotels';
import Nightlife from './categories/Nightlife';
import Shopping from './categories/Shopping';
import Activities from './categories/Activities';

function CategoryPlaces({ params }: IPageProps) {
  return (
    <>
      <Tops params={params} />
      <Restaurants params={params} />
      <Hotels params={params} />
      <Nightlife params={params} />
      <Shopping params={params} />
      <Activities params={params} />
      <ToVisit params={params} />
    </>
  );
}

export default CategoryPlaces;

我怎样才能在 React 中做到这一点？

ReactJS TypeScript Next.js next.js13

import React, { useState, useEffect } from 'react';
import ToVisit from './categories/ToVisit';
import Tops from './categories/Tops';
import Restaurants from './categories/Restaurants';
import Hotels from './categories/Hotels';
import Nightlife from './categories/Nightlife';
import Shopping from './categories/Shopping';
import Activities from './categories/Activities';

function CategoryPlaces({ params }: IPageProps) {
  const [componentToShow, setComponentToShow] = useState('Tops'); // Initially show Tops and ToVisit
  const components = ['Restaurants', 'Hotels', 'Nightlife', 'Shopping', 'Activities',ToVisit];

  useEffect(() => {
    function handleScroll() {
      const windowHeight = window.innerHeight;
      const scrollY = window.scrollY || window.pageYOffset;
      const bodyHeight = document.body.offsetHeight;

      // Check if scrolled to the bottom
      if (windowHeight + scrollY >= bodyHeight) {
        const nextComponentIndex = components.findIndex(comp => comp === componentToShow) + 1;
        if (nextComponentIndex < components.length) {
          setComponentToShow(components[nextComponentIndex]);
        }
      }
    }

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [componentToShow, components]);

  return (
    <>
      {componentToShow === 'Tops' && <Tops params={params} />}
      {componentToShow === 'Restaurants' && <Restaurants params={params} />}
      {componentToShow === 'Hotels' && <Hotels params={params} />}
      {componentToShow === 'Nightlife' && <Nightlife params={params} />}
      {componentToShow === 'Shopping' && <Shopping params={params} />}
      {componentToShow === 'Activities' && <Activities params={params} />}
      {componentToShow === 'ToVisit' && <ToVisit params={params} />}
    </>
  );
}

export default CategoryPlaces;

滚动时渲染下一个组件 [duplicate]

Render next components when scrolling [duplicate]

评论

评论