Использование Refs в функциональных компонентах RACT (часть 2) – Fourcef + UseiMperatichandle

Всем привет! 👋

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

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

Если вы хотите проверить, я также поставлю код для этих примеров Github Отказ

Так что давайте прыгнем в это!

Во всех предыдущих примерах, в первой части этой серии, нам нужно было получить доступ к элементу DOM в одном компоненте, но что, если нам нужно получить доступ к элементу из дочернего компонента, как мы это сделаем?

1.1 ref пересылать

Как указано в документах, React Components скрывают свои детали реализации, в том числе их результаты. Таким образом, компоненты не могут легко получить доступ от своих детей.

Хотя это хорошая вещь, предотвращая нас полагаться на сооружения DOM других компонентов, есть случаи, когда нам нужно получить доступ к узлу DOM ребенка для управления фокусом, выбором и анимацией.

Для этого реагирование предоставляет функцию, называемую переадресами.

Ref Expressing – это функция opt-in, которая позволяет некоторым компонентам предпринять, они получают, и передают его дальше (другими словами, «вперед» его) к ребенку.

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

import React from 'react';

type ForwardedInputProps = {
    placeholder?: string
};

const ForwardedInput = React.forwardRef(({ placeholder }, ref) => (
    
));

const SimpleForwardRef = () => {
    const inputRef = React.useRef(null);

    const selectText = () => {
        inputRef.current?.select();
    }

    return (
        

            
            Select text
        
    );
};

Как видите, мы создали объект REF с USEREF в родительском компонентах и передавали его на дочерний компонент. В ForwardInput Компонент, который мы называем Реагировать .Forwardref Функция, которая принимает реквизиты, и REF передается на функциональный компонент и возвращает jsx.Element для него. ForwardInput использует Реагировать .Forwardref Чтобы получить Ref Передался к нему, поэтому мы можем переслать сброс до ввода DOM. Таким образом, родительский компонент может получить Ref в основной входной узел DOM и получить доступ через его inputref Текущий имущество.

Один важный момент к примечанию – это набрав в Реагировать .Forwardref Отказ В качестве общего функции он получает параметры типа для REF и реквизиты, но в обратном порядке от его функциональных параметров. Так как мы прикрепили перенаправленную Ref для своего типа, будет HTMLINEPENTELEMENTEMENT Отказ

1.2 UseimpratationHandle.

В некоторых более продвинутых случаях вам может потребоваться больше контроля над возвращенным Ref, родитель будет иметь доступ к. Вместо того, чтобы вернуть само собой элемент DOM, вы явно определите, как будет возвращаемое значение, добавление новых свойств для возврата REF, например.

В таких случаях вам нужно будет использовать специальный крюк, UseimpratationHandle Отказ Как указано в документах:

UseiMperaticHandle настраивает значение экземпляра, которое подвергается воздействию родительских компонентов при использовании REF. Как всегда, необходимо избегать императивного кода, используя Refs. UseimpratationHandle следует использовать с Windows:

Давайте понять это немного лучше. Рассмотрим следующий пример, где, когда пользователь нажимает кнопку, связанную с коробкой, он прокручивает на верхнюю часть коробки.

import React, { useRef, forwardRef, useImperativeHandle } from 'react';

type BoxProps = {
    size: string,
    color: string
}

type IncrementedRef = {
    getYLocation: () => number | undefined,
    current: HTMLDivElement | null
}

const Box = forwardRef(({size, color}, ref) => {
    const divRef = useRef(null);
    useImperativeHandle(ref, () => ({
        getYLocation: () => divRef.current?.getBoundingClientRect().top,
        current: divRef.current
    }));

    return (
        

    );
});

const ImperativeHandleExample = () => {
    const refs = [useRef(null), useRef(null), useRef(null)];

    const goToBox = (position: number) => {
        console.log('Go to box: ', refs[position].current?.current)
        const boxTop = refs[position].current?.getYLocation();
        window.scrollTo({ top: boxTop, behavior: 'smooth'})
    }

    return (
        <>
        

             goToBox(0)}>Go to 1st box
             goToBox(1)}>Go to 2nd box
             goToBox(2)}>Go to 3rd box
        
        
        
        
        
    );
};

Здесь компонент коробки обернут FourSef. Так как мы получаем реф у родителя. Но вместо того, чтобы прикрепить его к

Поскольку мы хотим больше контроля над тем, какие свойства родителя получит доступ от Ref, у нас есть UseimpratationHandle. Чтобы установить этот новый Гемилокация Функция и

Помните, что с UseimpratationHandle. Вы должны явно заявить, что возвращение Ref будет. Он не будет содержать никакой другой собственности, поэтому, если вы не установили его как Текущий Имущество у вас не будет доступа к

Таким образом, в родительском компоненте мы создаем Refs и пересылаем его каждому компоненту коробки. Когда пользователь нажимает на каждую кнопку, он позвонит gotobox () И с его параметром положения мы получаем соответствующий Ref в массиве Refs. Тогда с Гемилокация Функция, которую мы определили с UseimpratationHandle. У нас есть координата Y Top и прокрутите к нему. Console.log печатает

Одна последняя точка снова печатает. Тип REF передан в функцию Westernf не А Htmldivelement Потому что с UseimpratationHandle. Мы создаем новый возврат, чтобы быть Ref и этот новый Ref есть только Гемилокация и Текущий характеристики.

Как показано в приведенных выше примерах, вы также можете получить доступ к основным элементам DOM из детских функциональных компонентов с Переадресация характерная черта. Для более продвинутых случаев вы даже можете настроить то, что будет иметь доступ к родительскому компоненту с Ref передан своим детям с UseimpratationHandle Несмотря на то, что, как указано в документах, необходимо избегать императивного кода, используя Refs.

Если вы пришли так далеко, я бы очень признателен за любые отзывы или комментарии, указывающие на любые исправления, которые вы предложили бы. Надеюсь, это будет полезно для вас:)

Кроме того, есть еще одна статья, чтобы закончить эту серию, где мы увидим, как использовать Refs в функциональных компонентах, чтобы иметь что-то вроде переменных экземпляров. Если вы хотите проверить это:)

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

https://reactjs.org/docs/forwarding-Refs.html https://reactjs.org/docs/hooks-reference.html#useImpratichandle. https://moduscreate.com/blog/everything-you-need-to-know-about-refs-in-dreact/ https://blog.logrocket.com/how-to-use-react-createref-ea014ad09dba/ https://www.carlrippon.com/react-forwardref-typescript/ https://stackoverflow.com/questions/57005663/when-to-use-useimpraticHandle-useLayouteffect-and-usebugvalue https://stackoverflow.com/questions/62040069/react-useimperativehandle-how-to-expose-dom-and-inner-methods

Оригинал: “https://dev.to/carlosrafael22/using-refs-in-react-functional-components-part-2-forwardref-useimperativehandle-3naa”