Вопрос пользователя:
import {HOTELS} from '../../../../constants';
import {Item} from '../Item';
export const HotelList = () => {
return <div className="list">
{HOTELS.map(({img, title}, index) => <Item key={index} img={img} title={title}/>)}
</div>
}
// import React from 'react';
import { useSearchParams, setSearchParams, Route, Link} from 'react-router-dom';
// import {useRef, useEffect} from 'react';
// // export const Title = ({children}: React.PropsWithChildren) => {
// // return <h4>{children}</h4>;
// // };
// export const Title = ({ children }) => { const titleRef = useRef(null);
// const [searchParams, setSearchParams] = useSearchParams();
// useEffect(() => {
// if (searchParams.currentTab === 'hotels' || searchParams.currentTab === 'countries') { titleRef.current.scrollIntoView({ behavior: 'smooth' }); }
// }, [searchParams.currentTab]);
// return <h4>{children}</h4>;
// };
import React, { useEffect, useRef } from 'react';
export const Title = ({ children }: React.PropsWithChildren) => { const titleRef = useRef<HTMLHeadingElement>(null); const [searchParams, setSearchParams] = useSearchParams();
useEffect(() => {
if (searchParams.currentTab === 'hotels' || searchParams.currentTab === 'countries') { titleRef.current.scrollIntoView({ behavior: 'smooth' }); }
}, [searchParams.currentTab]);
return <h4 ref={titleRef}>{children}</h4>;
};
На экране вы видите табы. Нажатие на таб должно проставлять в SearchParams в ключ currentTab одно из двух значений: hotels или countries, в зависимости от нажатого таба.
В компоненте src/pages/List/components/Title начните отслеживать SearchParams. Если ключ currentTab изменяется, запускайте скролл до текущего элемента.
Для отслеживания текущих параметров используйте хук useSearchParams. Чтобы проскроллить к текущему элементу, используйте ref и scrollIntoView.
Ответ нейросети:
Пройдите быструю авторизацию для просмотра: Войти через Google
Войти через Яндекс
Войти через VK
// import React from 'react';
import { useSearchParams, setSearchParams } from 'react-router-dom';
import { useEffect, useRef } from 'react';
export const Title = ({ children }: React.PropsWithChildren) => {
const titleRef = useRef<HTMLHeadingElement>(null);
const [searchParams, setSearchParams] = useSearchParams();
useEffect(() => {
if (searchParams.currentTab === 'hotels' || searchParams.currentTab === 'countries') {
titleRef.current.scrollIntoView({ behavior: 'smooth' });
}
}, [searchParams.currentTab]);
return <h4 ref={titleRef}>{children}</h4>;
};