const handleScroll = () => { const scrollTop: any = document.getElementById( props.isTabs ? 'history-scroll1' : 'history-scroll2' )?.scrollTop const clientHeight: any = document.getElementById( props.isTabs ? 'history-scrol...-QT开发中文网

根据你提供的代码，我看到有一个条件渲染部分，根据props.isTabs的值来确定渲染哪个组件。如果切换tab时需要正确修改，请确保props.isTabs的值在切换时正确更新。

另外，在处理滚动事件时，可以优化一下获取DOM元素的方式，避免重复获取。可以先将滚动区域的DOM元素存储为变量，然后在需要使用时直接使用该变量。

下面是修改后的代码示例：

const handleScroll = () => {
  const scrollContainerId = props.isTabs ? 'history-scroll1' : 'history-scroll2';
  const scrollContainer: HTMLElement | null = document.getElementById(scrollContainerId);
  
  if (scrollContainer) {
    const { scrollTop, clientHeight, scrollHeight } = scrollContainer;

    // 判断是否接近页面底部
    if (scrollTop + clientHeight + 50 > scrollHeight) {
      if (!props.isTabs) {
        setNum(num + 1);
      } else {
        setNumm(numm + 1);
      }

      // 实际应判断当前条数与接口总条数是否相等，调用接口之后更换判断
      if (num >= 3 && !props.isTabs) {
        return setIsLodComplete(true);
      }
      
      if (numm >= 3 && props.isTabs) {
        return setIsLodCompletem(true);
      }

      // 加载更多数据的操作
      if (!props.isTabs && num < 3) {
        let state = [
          {
            historyUrl: $tools.IMG_RIGHT_ARROW,
            textDay: '嘻嘻嘻嘻嘻',
            cumSgin: '下踩踩踩踩踩踩',
            Integral: 1,
            activeValue: 2,
            mallVoucher: 3,
          },
          {
            historyUrl: $tools.IMG_RIGHT_ARROW,
            textDay: '嘻嘻嘻嘻',
            cumSgin: '下踩踩踩踩踩踩',
            Integral: 1,
            activeValue: 2,
            mallVoucher: 3,
          },
        ];
        return setRewardsList((data) => [...data, ...state]);
      }

      if (props.isTabs && numm < 3) {
        let stateTwo = [
          {
            awardUrl: $tools.IMG_RIGHT_ARROW,
            awardTitle: 'xxxxxxxxx',
            awardIntegral: 100,
            awardDate: '2024-04-16 00:00',
          },
          {
            awardUrl: $tools.IMG_RIGHT_ARROW,
            awardTitle: 'xxxxxxxxx',
            awardIntegral: 100,
            awardDate: '2024-04-16 00:00',
          },
        ];
        return setAwardList((data) => [...data, ...stateTwo]);
      }
    }
  }
};

useEffect(() => {
  const scrollContainerId = props.isTabs ? 'history-scroll1' : 'history-scroll2';
  
  const scrollRegio = document.getElementById(scrollContainerId);

  if (scrollRegio) {
    scrollRegio.addEventListener('scroll', handleScroll);
    return () => scrollRegio.removeEventListener('scroll', handleScroll);
  }
}, [rewardsList, awardList, props.isTabs]);

return (
  <div
    id={props.isTabs ? 'history-scroll1' : 'history-scroll2'}
    className={props.isTabs ? 'record-left' : 'award-right'}
  >
    {/* ActiveAward活跃值大奖   TaskRewards任务奖励 */}
    {props.isTabs ? (
      <ActiveAward awardList={awardList} isLodComplete={isLodCompletem} />
    ) : (
      <TaskRewards rewardsList={rewardsList} isLodComplete={isLodComplete} />
    )}
  </div>
);

注意，在修改后的代码中，使用了scrollContainerId变量来存储滚动容器的id，并且在添加/移除滚动事件监听时使用该变量。这样可以保证切换tab时正确绑定/解绑滚动事件。

内容由零声教学AI助手提供，问题来源于学员提问