const [offset, setOffset] = useState(0); const handleSlideLeft = (isFocus: Boolean) => { const Left = setInterval(() => { setOffset(prevOffset => prevOffset - 20); // 向左滑动 100 像素 }, 10); if (isFocus) { Left } else { clearInterval(Left) } }; const handleSlideRight = (isFocus: Boolean) => { const Right = setInterval(() => { setOffset(prevOffset => prevOffset + 20); // 向左滑动 100 像素 }, 10); if (isFocus) { Right console.log('2', 2) } else { console.log('02', '02') clearInterval(Right) } };

这段代码定义了两个函数 `handleSlideLeft` 和 `handleSlideRight`，分别用于向左和向右滑动。这两个函数的实现方式基本相同，都是使用 `setInterval` 创建定时器，然后在每次定时器触发时更新 `offset` 状态。

当 `isFocus` 为真时，会执行 `Left` 或 `Right`，也就是启动定时器。当 `isFocus` 为假时，会调用 `clearInterval` 函数来清除定时器，停止滑动。

需要注意的是，在 `handleSlideRight` 函数中，当 `isFocus` 为真时，会执行 `Right` 并输出 `2`，但这个输出语句应该放在 `setInterval` 外面，否则会在每次定时器触发时输出一次。

另外，和之前一样，需要在组件卸载时清除定时器，避免出现问题。完整代码如下：

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [offset, setOffset] = useState(0);
  const [leftInterval, setLeftInterval] = useState(null);
  const [rightInterval, setRightInterval] = useState(null);

  const handleSlideLeft = (isFocus: Boolean) => {
    if (isFocus) {
      const intervalId = setInterval(() => {
        setOffset(prevOffset => prevOffset - 20);
      }, 10);
      setLeftInterval(intervalId);
    } else {
      clearInterval(leftInterval);
      setLeftInterval(null);
    }
  };

  const handleSlideRight = (isFocus: Boolean) => {
    if (isFocus) {
      const intervalId = setInterval(() => {
        setOffset(prevOffset => prevOffset + 20);
      }, 10);
      setRightInterval(intervalId);
    } else {
      clearInterval(rightInterval);
      setRightInterval(null);
    }
  };

  useEffect(() => {
    return () => {
      if (leftInterval) {
        clearInterval(leftInterval);
      }
      if (rightInterval) {
        clearInterval(rightInterval);
      }
    };
  }, []);

  return <div>{offset}</div>;
}