LR, [02.10.2024 13:40] в зависимостях searchParams и tab, сам компонент должен принимать tab, а в разметке должен быть реф LR, [02.10.2024 14:05] в useEffect нужно получать из searchParams

Вопрос пользователя:

LR, [02.10.2024 13:40] в зависимостях searchParams и tab, сам компонент должен принимать tab, а в разметке должен быть реф LR, [02.10.2024 14:05] в useEffect нужно получать из searchParams currentTab и сравнивать его с пропсом // 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>; }; как исправить

Ответ нейросети:

Пройдите быструю авторизацию для просмотра:

Для того чтобы компонент принимал пропс tab и имел реф в разметке, нужно внести следующие изменения:

Изменить объявление компонента Title следующим образом:

import React, { useEffect, useRef } from 'react'; 
import { useSearchParams } from 'react-router-dom';

export const Title = ({ children, tab }: { children: React.ReactNode, tab: string }) => { 
    const titleRef = useRef<HTMLHeadingElement>(null); 
    const [searchParams] = useSearchParams();

    useEffect(() => {
        if (searchParams.get('currentTab') === tab) { 
            titleRef.current?.scrollIntoView({ behavior: 'smooth' }); 
        } 
    }, [searchParams, tab]);

    return <h4 ref={titleRef}>{children}</h4>;
};

При использовании компонента Title в других компонентах, необходимо передавать пропс tab:

<Title tab="hotels">Hotels</Title>
<Title tab="countries">Countries</Title>

Таким образом, компонент Title будет принимать пропс tab и иметь реф в разметке, а также будет корректно проверять текущую вкладку с помощью searchParams.

Напишите нам, если в вопросе есть ваши персональные данные (yasnoponyatno24@yandex.ru)

import React, { useEffect, useRef } from 'react'; 
import { useSearchParams } from 'react-router-dom';

export const Title = ({ children, tab }: { children: React.ReactNode, tab: string }) => { 
    const titleRef = useRef<HTMLHeadingElement>(null); 
    const [searchParams] = useSearchParams();

    useEffect(() => {
        if (searchParams.get('currentTab') === tab) { 
            titleRef.current?.scrollIntoView({ behavior: 'smooth' }); 
        } 
    }, [searchParams, tab]);

    return <h4 ref={titleRef}>{children}</h4>;
};

ЯсноПонятно24

Пройдите быструю авторизацию для просмотра:

Пройдите быструю авторизацию для просмотра:

Последние вопросы: