react-elastic-carousel到达首个索引时如何触发函数调整padding

问题根因 #

• 现有逻辑直接给上一页箭头绑定了加padding的事件，点击上一页时无论有没有回到起始索引都会立即加padding，不符合「仅回到index=0时才恢复padding」的要求
• 箭头内部元素额外绑定的点击事件和组件原生的箭头点击逻辑存在冲突，会导致状态更新时机不对
• 冗余的初始化useEffect没有实际作用，useState默认值已经覆盖了首次加载的状态需求

修复步骤 #

• 移除左右箭头内部div上绑定的addPadding/removePadding点击事件，避免重复触发
• 利用Carousel组件原生提供的onSlideChange回调获取当前轮播的活跃索引，根据索引值判断是否需要添加左侧padding：
  • 当activeIndex === 0（轮播在最起始位置）时，设置状态为true，添加45px左侧padding
  • 其他所有位置，设置状态为false，保持15px左侧padding
• 删除冗余的独立addPadding、removePadding方法，直接通过状态更新函数控制即可

修复后完整代码 #

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Carousel, { consts } from "react-elastic-carousel";
import Item from "./Item";
import "./styles.css";

const breakPoints = [
  { width: 1, itemsToShow: 1 },
  { width: 550, itemsToShow: 2, itemsToScroll: 2 },
  { width: 768, itemsToShow: 3 },
  { width: 1200, itemsToShow: 4 }
];

const items = [1, 2, 3, 4, 5, 6, 7, 8];

function App() {
  const [first, setFirst] = useState(true);

  // 监听轮播滑动变化，根据当前索引判断padding状态
  const handleSlideChange = (currentItem) => {
    // index为0说明已经回到最左侧起始位置
    setFirst(currentItem.index === 0);
  };

  const renderArrows = ({ type, onClick, isEdge }) => {
    const pointer =
      type === consts.PREV ? (
        <div
          style={{
            top: 5,
            left: 0,
            display: "flex",
            height: "100%",
            width: "100%",
            alignItems: "center",
            justifyContent: "center"
          }}
        >
          <span role="img" aria-label="">
            👈
          </span>
        </div>
      ) : (
        <div
          style={{
            top: 5,
            right: 0,
            display: "flex",
            height: "100%",
            width: "100%",
            alignItems: "center",
            justifyContent: "center"
          }}
        >
          <span role="img" aria-label="">
            👉
          </span>
        </div>
      );

    return (
      <button
        onClick={onClick}
        disabled={isEdge}
        style={{
          zIndex: 1010,
          width: 55,
          fill: "black",
          cursor: "pointer",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          transition: "all .8s ease-in-out !default"
        }}
      >
        {pointer}
      </button>
    );
  };

  return (
    <div className="App">
      <div className="controls-wrapper">
        <button onClick={() => setFirst(false)}>Remove Padding</button>
        <button onClick={() => setFirst(true)}>Add Padding</button>
      </div>
      <hr className="seperator" />
      <div className="carousel-wrapper" style={{ backgroundColor: "maroon" }}>
        <div
          style={{
            paddingLeft: first ? 45 : 15,
            paddingTop: 15,
            paddingBottom: 15,
            paddingRight: 15
          }}
        >
          <Carousel
            breakPoints={breakPoints}
            renderArrow={renderArrows}
            onSlideChange={handleSlideChange}
            style={{ backgroundColor: "white" }}
          >
            {items.map((item) => (
              <Item key={item}>{item}</Item>
            ))}
          </Carousel>
        </div>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

效果说明 #

• 首次加载轮播默认带45px左侧padding，符合初始样式要求
• 点击下一页向后滑动时，只要离开index=0位置，左侧padding自动变为15px
• 点击上一页向前回退时，只有完全回到index=0的最起始位置，才会重新恢复45px左侧padding
• 手动控制的两个测试按钮功能保持正常

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