Javascript JS/React旋转木马与useEffect&；挂钩-水平滚动至<；a>；传送带中的标签？

我构建了下面的旋转木马/图像滑块，它将提供给它的子对象视为幻灯片。到目前为止，我没有使用太多的JS，它几乎都是HTML和CSS（除了样式化的组件和整个东西是一个函数的事实）

import React，{Component，useState，useffect}来自'React'；
从“样式化组件”导入样式化；
让包装器=styled.div`
宽度：100%；
显示器：flex；
弯曲方向：行；
溢出-x：自动；
-webkit溢出滚动：触摸；
滚动捕捉类型：x必填；
&>部门{
滚动捕捉对齐：开始；
}
`;
let Slide=styled.div`
宽度：100%；
弹性收缩：0；
填充：30px；
`;
让SlideLink=styled.a`
右侧填充：3px；
颜色：紫色；
颜色：${props=>（props.isActive？'purple'：'gray`}；
`;
常量滑块=（{children}）=>{
const[activeSlide，setActiveSlide]=useState（0）；
useffect（（）=>{
// ??
}，[activeSlide]）；
返回(
setActiveSlide（activeSlide-1）}>PREV
{children.map（（child，i）=>{
返回(
{
setActiveSlide（i）；
}}
>
{i+1}
);
})}
{children.map（（child，i）=>{
返回{child}；
})}
setActiveSlide（activeSlide+1）}>NEXT
);
};
导出默认滑块；

它工作得很好，但我还想使用

下一张幻灯片

和

上一张幻灯片

按钮进行导航。但我不知道如何用这个设置来实现这一点。我想我需要在包装内水平滚动？或者我可以通过编程方式“跳转”到某些ID，比如在某种程度上单击

-标记

---

我真的很感激一些建议，我被卡住了，觉得我可能以一种不太理想的方式编码了它？

一种可能的方法是，每当单击

prev/next

按钮时，将幻灯片排成一行并在它们之间切换。对于初学者，您可以简单地依靠项目索引来确定视图中应该显示哪个幻灯片？另一种可能更容易的方法是使用

overflow-x:hidden

而不是

auto

，然后在幻灯片包装和幻灯片之间添加一个中间包装。通过

activeSlide*100%

使用

translateX

转换中间包装。这还可以让你只使用CSS就可以获得不同数量的列（例如，桌面上并排显示3张幻灯片，移动设备上显示一张幻灯片），而无需修改JS。不过，您必须在JS中添加滑动支持。一种可能的方法是，每当单击

prev/next

按钮时，将幻灯片排列起来并在它们之间切换。对于初学者，您可以简单地依靠项目索引来确定视图中应该显示哪个幻灯片？另一种可能更容易的方法是使用

overflow-x:hidden

而不是

auto

，然后在幻灯片包装和幻灯片之间添加一个中间包装。通过

activeSlide*100%

使用

translateX

转换中间包装。这还可以让你只使用CSS就可以获得不同数量的列（例如，桌面上并排显示3张幻灯片，移动设备上显示一张幻灯片），而无需修改JS。不过，您必须在JS中添加滑动支持。

import React, { Component, useState, useEffect } from 'react';
import styled from 'styled-components';

let Wrapper = styled.div`
  width: 100%;

  display: flex;
  flex-direction: row;
  overflow-x: auto;

  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;

  & > div {
    scroll-snap-align: start;
  }
`;

let Slide = styled.div`
  width: 100%;
  flex-shrink: 0;
  padding: 30px;
`;

let SlideLink = styled.a`
  padding-right: 3px;
  color: purple;
  color: ${props => (props.isActive ? 'purple' : `gray`)};
`;

const Slider = ({ children }) => {
  const [activeSlide, setActiveSlide] = useState(0);

  useEffect(() => {
    // ??
  }, [activeSlide]);

  return (
    <>
      <button onClick={() => setActiveSlide(activeSlide - 1)}>PREV</button>
      {children.map((child, i) => {
        return (
          <SlideLink
            href={`#slide-${i + 1}`}
            isActive={activeSlide === i}
            onClick={e => {
              setActiveSlide(i);
            }}
          >
            {i + 1}
          </SlideLink>
        );
      })}

      <Wrapper>
        {children.map((child, i) => {
          return <Slide id={`slide-${i + 1}`}>{child}</Slide>;
        })}
      </Wrapper>

      <button onClick={() => setActiveSlide(activeSlide + 1)}>NEXT</button>
    </>
  );
};

export default Slider;