从 javascript 转换为 React 时，教程中的旋转图像库不起作用

Question

我正在遵循制作旋转图库的指南。它的 github 可以在这里找到：https://github.com/HuXn-WebDev/HTML-CSS-JavaScript-100-Projects/tree/main/62.%20Rotating%20Image%20Gallery

在指南中，他们使用纯 JavaScript 来通过 id 和其他方式获取元素。我一直在尝试将其转换为反应/打字稿应用程序。它在大多数情况下都有效，但有一个奇怪的问题我似乎无法解决。我可以按两次下一个按钮，它会按预期工作，但如果我第三次单击下一个按钮，它会返回到上一个图像（本质上是执行上一个按钮应该执行的操作）。然后对于上一个按钮，它似乎总是将其带回到第一个图像（而不是向左滚动一次）。

旋转是通过 css 完成的，它本质上只是基于 x 变量进行旋转。有什么可以解释为什么旋转不能正常工作吗？

const Rotating = () => {

const [currentTransform, setCurrentTransform] = useState(`perspective(1000px) rotateY(0deg)`);
let x = 0;

const handlePreviousButton = () => {
    x = x + 45;
    rotate();
}

const handleNextButton = () => {
    x = x - 45;
    rotate();
}

const rotate = () => {
    setCurrentTransform(`perspective(1000px) rotateY(${x}deg)`);
}


return (
    <div className="rotating-gallery-main-div-style">
        <div className="rotating-gallery-image-container" style={{transform: currentTransform} as React.CSSProperties}>
            <span style={{ "--i": 1 } as React.CSSProperties}>
                <img
                    src="/images/dhh/gallery-images/Farm/01.jpg"
                />
            </span>
            <span style={{ "--i": 2 } as React.CSSProperties}>
                <img
                    src="/images/dhh/gallery-images/Farm/02.jpg"
                />
            </span>
            <span style={{ "--i": 3 } as React.CSSProperties}>
                <img
                    src="/images/dhh/gallery-images/Farm/03.jpg"
                />
            </span>
            <span style={{ "--i": 4 } as React.CSSProperties}>
                <img
                    src="/images/dhh/gallery-images/Farm/04.jpg"
                />
            </span>
            <span style={{ "--i": 5 } as React.CSSProperties}>
                <img
                    src="/images/dhh/gallery-images/Farm/05.jpg"
                />
            </span>
            <span style={{ "--i": 6 } as React.CSSProperties}>
                <img
                    src="/images/dhh/gallery-images/Farm/06.jpg"
                />
            </span>
            <span style={{ "--i": 7 } as React.CSSProperties}>
                <img
                    src="/images/dhh/gallery-images/Farm/07.jpg"
                />
            </span>
            <span style={{ "--i": 8 } as React.CSSProperties}>
                <img
                    src="/images/dhh/gallery-images/Farm/08.jpg"
                />
            </span>
        </div>



    

    <div className="rotating-gallery-btn-container">
          <Button onClick={handlePreviousButton} className="rotating-gallery-prev-btn rotating-gallery-btn" variant="primary">Previous</Button>
          <Button onClick={handleNextButton} className="rotating-gallery-next-btn rotating-gallery-btn" variant="primary">Next</Button>
            </div>

        </div>
    )
}

    .rotating-gallery-image-container {

  position: relative;
  width: 250px;
  height: 250px;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateY(0deg);
  transition: transform 0.7s;
}

.rotating-gallery-image-container span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
}

.rotating-gallery-image-container span img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

Answer 1

如果有人看到这个并且感到好奇，我就能找到解决方案。我没有使用 let x=0 然后单击按钮执行 x = x + 45，而是将其更改为反应使用状态。所以就这样了

const [x, setX] = useState(0);

然后在按钮中单击 setX(x + 45)。

不知道为什么其他方法不起作用，但这对我有用。