React中点击按钮实现translateX值增减1170px的方法

在React中不建议直接操作DOM修改样式，应该用**状态(State)**来管理UI变化。下面是修改后的代码，实现点击按钮控制translateX的需求：

import { useState } from 'react';
import { Link } from 'react-router-dom'; // 若使用react-router需导入

function Slideshow() {
  const slider = [
    { name: slide_logo_1, link: "https://timesrecords.lnk.to/CITOPIA" },
    {
      name: slide_logo_2,
      link: "https://store.hangdiathoidai.com/search?q=lana+del+rey",
    },
    { name: slide_logo_3, link: "https://timesrecords.lnk.to/TocTien-Cong" },
    { name: slide_logo_4, link: "https://timesrecords.lnk.to/TSMidnights" },
    { name: slide_logo_5, link: "https://timesrecords.lnk.to/LINK-HTL" },
  ];

  // 初始化translateX状态，初始值为0
  const [translateX, setTranslateX] = useState(0);
  const slideWidth = 1170;
  // 最大左移值（防止滑出最后一张）
  const maxLeftTranslate = -(slideWidth * (slider.length - 1));

  // 点击左按钮（sangtrai）：向右滑动，增加translateX
  const handleLeftClick = () => {
    setTranslateX(prev => Math.min(prev + slideWidth, 0));
  };

  // 点击右按钮（sangphai）：向左滑动，减少translateX
  const handleRightClick = () => {
    setTranslateX(prev => Math.max(prev - slideWidth, maxLeftTranslate));
  };

  return (
    <section>
      <div className="wrapper">
        <div className="inner space-30 section-slider">
          <div
            className="slider-carousel owl-carousel owl-theme"
            id="slider-carousel"
            data-mobile="[479,1]"
            data-tabletsmall="[768,1]"
            data-desktopsmall="[979,1]"
            data-desktop="[1199,1]"
            data-pagination="false"
            data-navigation="true"
            data-autoplay="5000"
            data-items="1"
            style={{ display: "block", opacity: 1 }}
          >
            <div
              className="owl-wrapper-outer autoHeight"
              style={{ height: 431 }}
            >
              <div
                className="owl-wrapper"
                style={{
                  width: 11700,
                  left: 0,
                  display: "block",
                  transition: `all 400ms ease 0s`,
                  // 用状态动态生成transform值
                  transform: `translate3d(${translateX}px, 0, 0)`,
                }}
              >
                {slider.map((products, index) => {
                  return (
                    <div className="owl-item" style={{ width: slideWidth }} key={index}>
                      <div className="text-center">
                        <Link
                          className="slide"
                          to={products.link}
                          title=""
                        >
                          <img src={products.name} alt="" />
                        </Link>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

            <div className="owl-controls clickable">
              <div className="owl-buttons">
                <div
                  className="sangtrai owl-prev"
                  onClick={handleLeftClick}
                ></div>
                <div 
                  className="sangphai owl-next"
                  onClick={handleRightClick}
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default Slideshow;

关键修改说明 #

• 用useState创建translateX状态，替代DOM操作，遵循React状态驱动UI的核心逻辑。
• 新增两个点击处理函数，分别控制左右滑动：
  • 左按钮：限制translateX不超过0，避免滑出第一张图。
  • 右按钮：限制translateX不小于最大左移值，避免滑出最后一张图。
• 动态绑定owl-wrapper的transform属性，实现样式随状态自动更新。
• 修正列表渲染的key位置，符合React列表渲染规范。
• 移除原代码中无效的<Alert>调试代码（如需调试可改用console.log）。

内容的提问来源于stack exchange，提问作者Alukusukuku