0

我正在尝试修改此按钮菜单：

（请点击链接查看小提琴）

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 滚动到第 1 节、第 2 节滚动到第 2 节、第 3 节滚动到第 3 节...

出于演示目的，这里是部分组件：

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 },
    ]}
4

1 回答 1

0

为了链接到页面中的某个部分，您需要为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} />

这有帮助吗？

于 2019-10-24T11:28:48.287 回答