Как прокрутить раздел с помощью кнопки React в шахматном порядке - PullRequest
Новая
       38

Как прокрутить раздел с помощью кнопки React в шахматном порядке

0 голосов
/ 10 октября 2019

Я пытаюсь изменить это меню кнопок:

(нажмите на ссылку, чтобы увидеть скрипку)

https://codepen.io/andytran/pen/YGyQRY

Я хочу создать событие onclick ИЛИвыделите свойство раздела на отдельных кнопках. Это массив: 

const iconArrayOne = [1, 2, 3];
const iconArrayTwo = [1, 2, 3].reverse();

И это расположение кнопок: 

    <ButtonGroup>
      <StaggeredMotion
        defaultStyles={[
          { x: -45, o: 0 },
          { x: -45, o: 0 },
          { x: -45, o: 0 },
        ]}

Как видите, кнопки перечислены в массиве, мне нужно определить каждый индексмассива и создайте событие onclick или, что еще лучше, используйте свойство Reacts: to = section, поэтому каждая кнопка прокручивает в отдельный раздел: 1 прокручивает в section1, 2 прокручивает в section2, 3 прокручивает в section3 ...

Для демонстрации используйте компонент section: 

import React from "react";

export default function Section({ title, subtitle, dark, id }) {
  return (
    <div className={"section" + (dark ? " section-dark" : "")}>
      <div className="section-content" id={id}>
        <h1>{title}</h1>
        <p>{subtitle}</p>
      </div>
    </div>
  );
}

Это свойство, которое я хотел бы использовать 

to="section1"

Укажите, как это сделать в массиве? 

<ButtonGroup>
  <StaggeredMotion
    defaultStyles={[
      { x: -45, o: 0 },
      { x: -45, o: 0 },
      { x: -45, o: 0 },
    ]}

1 Ответ

0 голосов
/ 24 октября 2019

для ссылки на раздел на вашей странице вам нужно установить атрибут id для каждого раздела, чтобы потом можно было передать его в виде «ссылки» на каждую кнопку 

import React from "react";

export default function Section({ title, subtitle, dark, id }) {
  return (
    <div id="UNIQUE_ID_FOR_EACH_SECTION" className={"section" + (dark ? " section-dark" : "")}>
      // ...
    </div>
  );
}

с этим на месте, тогда вы можете иметь массив со всеми разделами, и затем вы можете передать его каждой кнопке на карте функции, которую вы используете для рендеринга каждой кнопки. 


const links = [
  {
    label: "something",
    url: "#UNIQUE_ID_FOR_EACH_SECTION_1"
  },
  {
    label: "something else",
    url: "#UNIQUE_ID_FOR_EACH_SECTION_2"
  }
]

// then on each button:

<Button to={links[index].url} />

это помогает?

...