День 3: React useRef hook для прокрутки HTML элементов.

Привет, ребята — сегодня я быстро.

Недавно я закончил главную страницу своего портфолио.

И я понял… Я не мог понять, как заставить каждый сегмент красиво прокручиваться, используя классический режим

window.scrollTo(xCor,yCor)

Вход в полноэкранный режим Выход из полноэкранного режима

Это происходило потому, что учет отзывчивости, указание координат приводило к тому, что желаемое место прокрутки было не совсем корректным.

Итак, после быстрого гугления выяснилось, что в React есть очень хороший крючок для использования в подобных случаях — useRef().

Для тех, кто не знает — useRef() — это хук React, который позволяет хранить ссылку на объект, сохраняющуюся во время рендеринга.

Это означает, что его можно использовать для различных вещей, таких как:

прямой доступ к DOM (что, как я понимаю, мы должны оставлять на усмотрение React большую часть времени)
хранить изменяемое значение, которое не вызывает повторных рендеров при обновлении.
сохранение предыдущего состояния.

Однако мы сосредоточимся на том, чтобы обращаться к элементам DOM напрямую.

Как использовать useRef для прокрутки к элементу.

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

Итак, допустим, у меня есть div, который я хочу прокрутить, потому что он содержит раздел «Обо мне».

В качестве тестового стенда давайте сделаем пример в нашем компоненте App.js.
Настройте два div:

import "./styles.css";
import React from "react";
export default function App() {

  return (
    <div>
      <div className="mainSection">
        <h1>My Main Section</h1>
      </div>
      <div className="mainSection">
        <h1>My About me section</h1>
      </div>
    </div>
  );
}

Вход в полноэкранный режим Выход из полноэкранного режима

И ваш файл styles.css:

.mainSection {
  height: 100vh;
}

Войти в полноэкранный режим Выйти из полноэкранного режима

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

Теперь нам нужно импортировать хук:

import React, {useRef} from 'react';

Войти в полноэкранный режим Выход из полноэкранного режима

Вы должны объявить ваш ref следующим образом:

export default function App() {
  const aboutMeRef = useRef(null);
//...Rest of code

Вход в полноэкранный режим Выход из полноэкранного режима

Итак, теперь нам нужно прикрепить эту ссылку к реальному HTML-элементу, здесь мы прикрепим ее к нашему второму div, который содержит заголовок «Раздел «Обо мне»»:

<div className="mainSection" ref={aboutMeRef}>
    <h1>My About me section</h1>
</div>

Войти в полноэкранный режим Выход из полноэкранного режима

Последнее, что нам нужно сделать, это логика прокрутки к нашему элементу.
Поэтому мы добавим простую кнопку с приемником события onClick.

В наш первый div после тега h1 добавим нашу кнопку:

<div className="mainSection">
    <h1>My Main Section</h1>
    <button onClick={buttonHandler}>Go to About Me</button>
</div>

Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь, конечно, нам нужна функция buttonHandler, которая будет использовать нашу ссылку и скажет нашему браузеру прокрутить страницу до нее, мы также добавим плавное поведение, чтобы подчеркнуть, что она работает.

function buttonHandler(){
    aboutMeRef.current.scrollIntoView({
        behavior: "smooth" 
    });
}

Вход в полноэкранный режим Выход из полноэкранного режима

Хорошо, и с этим давайте посмотрим, работает ли это.

Хорошо, отлично, все работает.

Как обычно — если кто-то из более опытных разработчиков, или многие люди, которые знают лучше, хотят сделать какие-то замечания или подсказки в комментариях, я всегда открыт для обучения!