Как перейти к определенному элементу или перейти к содержимому в ReactJS?

Опубликовано: 8 Августа, 2022

В следующем примере показано, как перейти к элементу веб-страницы в React JS с помощью хука useRef().

Условие:

  • Базовые знания npm и команды create-react-app.
  • Базовые знания о styled-components.
  • Базовые знания хуков useRef React.

Базовая настройка: вы начнете новый проект, используя приложение create-реагировать, поэтому откройте свой терминал и введите.

npx create-react-app react-scroll

Теперь перейдите в папку с прокруткой реакции , введя данную команду в терминале.

cd react-scroll

Требуемый модуль: Установите зависимости, необходимые в этом проекте, введя данную команду в терминале.

npm install --save styled-components

Теперь создайте папку компонентов в src , затем перейдите в папку компонентов и создайте два файла ScrollPage.js и Styles.js .

Структура проекта: файловая структура проекта будет выглядеть следующим образом.

Метод scrollTo: используется для прокрутки до указанного элемента в браузере. Здесь мы используем верхний , левый , правый или нижний в качестве первого параметра для прокрутки страницы в нужном направлении.

Второй параметр — это поведение (прокрутки). Он сообщает нам, как окно достигнет указанного элемента, и имеет значение по умолчанию auto. Однако указывать этот параметр необязательно, так как браузер использует значение по умолчанию, если оно не указано.

Типы поведения:

  1. Автоматическое поведение: позволяет прямой прыжок с «эффектом прокрутки» и переносит нас к элементу. Это значение параметра поведения по умолчанию, как обсуждалось выше.

    Синтаксис:

     окно.scrollTo({
         верх: 100px
         // Браузер использует значение по умолчанию в 
         // если не предусмотрено.
    });
     окно.scrollTo({
         верх: 100px,
         поведение: "авто"
    });
  2. Плавное поведение: он обеспечивает плавный «эффект прокрутки» по странице и переносит нас к элементу.

    Синтаксис:

     окно.scrollTo({
            верх: 100px,
            поведение: "гладкое"
        });

Пример: прокрутите вниз до элемента Services, где вступает в игру роль хука useRef(). Мы создаем объект useRef ServicesRef , который инициализируется нулем. Этот объект имеет свойство с именем .current . Значение всегда продолжается в свойстве refObject.current .

Когда мы нажимаем кнопку, функция gotoServices запускается через событие onClick и устанавливает верхний параметр функции scrollTo в значение верхней позиции нашего элемента Services (в пикселях). Доступ к этой верхней позиции элемента Services осуществляется с помощью свойства offsetTop путем записи Services.current.offsetTop , которая возвращает верхнюю позицию (в пикселях) относительно верхней части элемента offsetParent.

Например, если наш элемент Services находится на расстоянии 100 пикселей от родительского элемента, то есть элемента div в данном случае, тогда он присвоит 100 пикселей верхнему параметру функции scrollTo, которая перемещает нас на 100 пикселей вниз по странице. Вот почему мы присваиваем здесь значение refObject.current.offsetTop верхнему параметру.

ScrollPage.js




import React, { useRef } from "react";
import { Heading, Button, Para, Margin } from "./Styles";
const ScrollPage = () => {
  const ServicesRef = useRef(null);
  
  const gotoServices = () =>
    window.scrollTo({
      top: ServicesRef.current.offsetTop,
      behavior: "smooth",
      // You can also assign value "auto"
      // to the behavior parameter.
    });
  
  return (
    <div>
      <Heading>GeeksForGeeks</Heading>
      <Button onClick={gotoServices}>Scroll to Services</Button>
  
      <Margin ref={ServicesRef}>
        <Heading>GeeksForGeeks Services</Heading>
  
        <Para>
          Lorem Ipsum è un testo segnaposto utilizzato nel settore della
          tipografia e della stampa. Lorem Ipsum è considerato il testo
          segnaposto standard sin dal sedicesimo secolo, quando un anonimo
          tipografo prese una cassetta di caratteri e li assemblò per preparare
          un testo campione. È sopravvissuto non solo a più di cinque secoli, ma
          anche al passaggio alla videoimpaginazione, pervenendoci
          sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la
          diffusione dei fogli di caratteri trasferibili “Letraset”, che
          contenevano passaggi del Lorem Ipsum, e più recentemente da software
          di impaginazione come Aldus PageMaker, che includeva versioni del
          Lorem Ipsum.
        </Para>
  
        <Para>
          Lorem Ipsum è un testo segnaposto utilizzato nel settore della
          tipografia e della stampa. Lorem Ipsum è considerato il testo
          segnaposto standard sin dal sedicesimo secolo, quando un anonimo
          tipografo prese una cassetta di caratteri e li assemblò per preparare
          un testo campione. È sopravvissuto non solo a più di cinque secoli, ma
          anche al passaggio alla videoimpaginazione, pervenendoci
          sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la
          diffusione dei fogli di caratteri trasferibili “Letraset”, che
          contenevano passaggi del Lorem Ipsum, e più recentemente da software
          di impaginazione come Aldus PageMaker, che includeva versioni del
          Lorem Ipsum.
        </Para>
      </Margin>
    </div>
  );
};
  
export default ScrollPage;

Styles.js




import styled from "styled-components";
  
export const Heading = styled.h1`
   margin: 0;
   padding: 0;
   text-align: center;
   color: green;
`;
  
export const Button = styled.button`
  padding: 20px;
  font-size: 20px;
  position: relative;
  left: 42%;
  margin: 20px;
`;
  
export const Para = styled.p`
  padding-left: 40px;
  padding-right: 40px;
`;
  
export const Margin = styled.div`
  margin-top: 610px;
  margin-bottom: 500px;
  background-color: black;
  color: white;
  padding: 20px;
`;

App.js




import { Fragment } from "react";
import ScrollPage from "./components/ScrollPage";
function App() {
  return (
     <Fragment>
      <ScrollPage />
     </Fragment>
    );
}
  
export default App;

Шаг для запуска приложения: Запустите приложение, используя следующую команду из корневого каталога проекта:

npm start

Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/ , вы увидите следующий вывод.

  • Использование поведения по умолчанию (авто): посмотрите, как он напрямую переходит к элементу.
  • Использование плавного поведения: посмотрите, как плавно проходит страница.