如何使用 React Redux 模板捕捉到网页的特定部分

Question

我目前正在使用 React 的 redux 模板，并试图找出代码的最后一部分。当您单击导航栏中的锚定项目时，我希望能够使页面对齐到特定部分。

import React, { useState } from "react";
import { useSelector } from "react-redux";
import styled from "styled-components";

const cars = useSelector(selectCars);

<Menu>
  {cars &&
    cars.map((car, index) => (
      <a key={index} href="...">
        {car}
      </a>
    ))}
</Menu>;

const Menu = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;

  a {
    font-weight: 600;
    text-transform: uppercase;
    padding: 0 10px;
    flex-wrap: no-wrap;
  }

  @media (max-width: 768px) {
    display: none;
  }
`;

这里是select部分代码。有什么想法吗？

Answer 1

第 1 步

将 # 附加到导航的 link 后跟（最好）汽车的 ID

<a key={index} href={`#${index}`}>

为了简单和我为您创建的演示（检查下面的 link），我们可以使用 map 函数中的 index。

第 2 步

将 id={index}（同样，我建议您使用 id={car.id}）附加到表示单个汽车（汽车部分）的主要容器的 HTML 元素。

演示

我在 How to navigate and snap to certain section of a web page in React

上创建了一个小示例

P.S。请记住，您需要处理捕捉偏移，以便从菜单中正确显示当前选择的汽车。我使用了一个你可以在 answer.

中找到的技巧

如何使用 React Redux 模板捕捉到网页的特定部分

How to snap to a certain section of the webpage using a react redux template

anchor

reactjs

react-redux

styled-components