React - реализация якорей
Алоха товарищи фронты! Недавно передо мной встала вполне себе стандартная задача, реализовать якоря для того что бы пользователь закрывая одну вкладку с инфой автоматически передвигался ко второй. В этом посте я хотел бы показать вам как вообще можно сделать что-то вроде якоря в react.
Суть проста:
1. Создаем ref объекта к которому мы хотим перейти.
2. В случае когда мы хотим перейти к этому объекту используем метод ref.current.scrollIntoView();import React, { useRef } from 'react';import { render } from 'react-dom';import './style.css';const ScrollDemo = () => { const myRef = useRef(null); const executeScroll = () => myRef.current.scrollIntoView(); return ( <> <div style={{ height: 600 }} /> <div ref={myRef}>Объект на который мы ссылаемся</div> <div style={{ height: 1500 }} /> <button onClick={executeScroll}>Перейти к объекту</button> </> );};
В общем вот как то так. Как обычно удачи в экспериментах!