Javascript 通过一个按钮跳转到顺序标记

我有以下源代码（React.js、React scroll、React bootstrap）。 单击div，跳转到特定图像标记。（在本例中，跳转到第一个图像。）

render（）{
返回(
{this.renderPageImages（）}
...
)
}
renderPageImages（）{
return u.map（第页图像，（第页图像，i）=>(
))
}

但我希望（单个）按钮按顺序跳转到图像标签

第一次单击：跳转到第一个图像标签（page-image-1）
第二次单击：跳到下一个图像标签（第2页图像）
第三次单击：跳到下一个图像标签（第3页图像）
…

请告诉我如何实现。

给你

不需要

您可以使用简单的

按钮

在滚动后立即增加计数，因此在下一次单击时，您可以滚动到下一个元素

scroller.scrollTo（“页面图像-”+scrollTo，{

工作演示

代码：

import React, { useState } from "react";
import "./styles.css";
import { Element, scroller } from 'react-scroll'

// fake data to loop through
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

export default function App() {
  // use state to maintain the last/next to scroll index
  const [scrollTo, setScrollTo] = useState(1);

  const scrollToElement = () => {

    // You can scroll to element by it's name
    scroller.scrollTo("page-image-" + scrollTo, {
      duration: 1500,
      delay: 100,
      smooth: true,
      offset: 0 // Scrolls to element + 50 pixels down the page
    });

    // increment the state, so on next click you can scroll to next element
    setScrollTo(scrollTo => scrollTo + 1);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={scrollToElement}>Scroll to {scrollTo}</button>
      {data.map(d => (
        <Element name={`page-image-${d}`} className="block"> // <--- Element
          Scroll to : {d}
        </Element>
      ))}
    </div>
  );
}

import React，{useState}来自“React”；
导入“/styles.css”；
从“react scroll”导入{Element，scroller}
//要循环通过的假数据
常量数据=[1,2,3,4,5,6,7,8,9,10]；
导出默认函数App（）{
//使用状态来维护最后一个/下一个滚动索引
常量[scrollTo，setScrollTo]=useState（1）；
常量scrollToElement=（）=>{
//您可以按元素的名称滚动到元素
scroller.scrollTo（“页面图像-”+scrollTo{
持续时间：1500，
延误：100，
平滑：是的，
偏移量：0//在页面向下滚动到元素+50像素
});
//增加状态，以便下次单击时可以滚动到下一个元素
setScrollTo（scrollTo=>scrollTo+1）；
};
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
滚动到{scrollTo}
{data.map（d=>(
//给你

不需要
您可以使用简单的
按钮
在滚动后立即增加计数，因此在下一次单击时，您可以滚动到下一个元素

scroller.scrollTo（“页面图像-”+scrollTo，{

工作演示


代码：

import React, { useState } from "react";
import "./styles.css";
import { Element, scroller } from 'react-scroll'

// fake data to loop through
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

export default function App() {
  // use state to maintain the last/next to scroll index
  const [scrollTo, setScrollTo] = useState(1);

  const scrollToElement = () => {

    // You can scroll to element by it's name
    scroller.scrollTo("page-image-" + scrollTo, {
      duration: 1500,
      delay: 100,
      smooth: true,
      offset: 0 // Scrolls to element + 50 pixels down the page
    });

    // increment the state, so on next click you can scroll to next element
    setScrollTo(scrollTo => scrollTo + 1);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={scrollToElement}>Scroll to {scrollTo}</button>
      {data.map(d => (
        <Element name={`page-image-${d}`} className="block"> // <--- Element
          Scroll to : {d}
        </Element>
      ))}
    </div>
  );
}


import React，{useState}来自“React”；
导入“/styles.css”；
从“react scroll”导入{Element，scroller}
//要循环通过的假数据
常量数据=[1,2,3,4,5,6,7,8,9,10]；
导出默认函数App（）{
//使用状态来维护最后一个/下一个滚动索引
常量[scrollTo，setScrollTo]=useState（1）；
常量scrollToElement=（）=>{
//您可以按元素的名称滚动到元素
scroller.scrollTo（“页面图像-”+scrollTo{
持续时间：1500，
延误：100，
平滑：是的，
偏移量：0//在页面向下滚动到元素+50像素
});
//增加状态，以便下次单击时可以滚动到下一个元素
setScrollTo（scrollTo=>scrollTo+1）；
};
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
滚动到{scrollTo}
{data.map（d=>(
//提供其他详细信息-状态变量、按钮代码等提供其他详细信息-状态变量、按钮代码等非常感谢。这正是我想要的。我从你的答案中学到了很多。非常感谢。这正是我想要的。我从你的答案中学到了很多。