React使用react-indiana-drag-scroll轮播默认聚焦指定图片问题求助

react-indiana-drag-scroll库没有内置初始展示索引的配置项，你需要手动控制滚动容器的初始偏移量实现需求，具体实现如下：

1. 修改ProjectCarousel组件代码 #

import React, { useRef, useEffect, createRef } from "react";
import { ProjectData } from "../projects/ProjectData";
import ProjectImage from "./ProjectImage";
import ScrollContainer from "react-indiana-drag-scroll";

import "./scss/ProjectCarousel.scss";

export default function ProjectCarousel() {
  // 声明滚动容器的ref
  const scrollContainerRef = useRef(null);
  // 存储每个项目卡片对应的ref
  const projectRefs = useRef(ProjectData.map(() => createRef()));

  useEffect(() => {
    // 组件挂载完成后执行滚动逻辑
    if (!scrollContainerRef.current || projectRefs.current.length < 2) return;
    // 取第二张卡片的DOM元素（索引从0开始，第二张对应索引1）
    const targetCard = projectRefs.current[1].current;
    if (!targetCard) return;

    // 配置1：第二张卡片对齐滚动容器左边缘
    let targetScrollLeft = targetCard.offsetLeft;

    // 配置2：如果需要第二张卡片在容器内居中显示，注释上面一行，使用下面的计算逻辑
    // const container = scrollContainerRef.current.container;
    // targetScrollLeft = targetCard.offsetLeft - (container.clientWidth / 2) + (targetCard.clientWidth / 2);

    // 执行滚动，behavior设为auto避免初始加载出现滚动动画
    scrollContainerRef.current.scrollTo({
      left: targetScrollLeft,
      behavior: "auto"
    });
  }, []);

  return (
    <ScrollContainer className="scroll-container" ref={scrollContainerRef}>
      {ProjectData.map(({ id, ...otherProps }, index) => (
        <div ref={projectRefs.current[index]} key={id}>
          <ProjectImage {...otherProps} />
        </div>
      ))}
    </ScrollContainer>
  );
}

2. 额外语法问题修复 #

你当前的ProjectImage组件存在a标签嵌套的语法错误，HTML规范不允许<a>标签内部嵌套另一个<a>标签，浏览器会自动调整DOM结构导致点击逻辑异常，建议调整布局结构，将两个跳转入口改为同级排布，参考修改代码如下：

import React from "react";
import GitIcon from "../soMe/icons/github_legend.png";
import "./scss/Project.scss";

export default function ProjectImage({ imageUrl, alt, github, webUrl }) {
  return (
    <div className="image">
      <img src={imageUrl} alt={alt} />
      <div className="action-group">
        <a href={webUrl} alt="Go to this project's website">访问项目站点</a>
        <a href={github} alt="See project on Github">
          <img src={GitIcon} alt="Github入口" />
        </a>
      </div>
    </div>
  );
 }

小提示：如果你的项目卡片有自定义左右边距，可以根据实际布局微调targetScrollLeft的数值，增减对应的边距值即可适配。

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