Что такое переадресация Ref и как вы его используете?

Прежде чем прочитать эту статью, очень важно ознакомиться с УСЭРЕФ крючок CreateRef API. Это было покрыто в моей предыдущей статье USEREF Крюк и CreateRef API Отказ

Ref Переадресация – это техника для автоматического прохождения Ref от компонента к одному из его детей. По словам Реагистрационная документация Это может быть не нужно в большинстве применений, но может быть полезно для некоторых видов компонентов, особенно в библиотеках многоразовых компонентов.

В примере ниже Приложение оказывает Форма компонент.

export default function App() {
  const myRef = useRef();
  return (
    

       < Form ref = {myRef} />
    
  );
}

Если вы хотите ссылаться на Дом элемент или классный компонент, оказываемый Форма от Приложение Вы можете пройти Ref к Форма компонент. Форма обернут в FourSef. так что он проходит или пересылает реф к Дом элемент или компонент класса он отображает.

function Form(props, ref) {
  return (
    

      
      
    
  );
}

export default React.forwardRef(Form);

Форма принимает два параметра. Первый параметр – реквизит а второй – Ref передал ему из своего родительского компонента Приложение . Затем он пересылает Ref либо Дом элемент или компонент класса, который он отображает, что в примере выше является вход элемент. Обратите внимание на то, как Форма был завернутый в Фудалия Отказ Второй параметр для Форма , Ref , только существует, если вы оберните его внутри FourSef. и Ref Атрибут JSX был передан ему из своего родительского компонента. Приведенный выше пример также может быть написан как:

export default React.forwardRef(function Form(props, ref) {
  return (
    

      
      
    
  );
});

Родительский компонент Приложение Тогда ссылки <ввод/> через Myref. ‘s Текущий имущество.

Это краткое изложение того, как Фудалия используется.

Спасибо за чтение этой статьи до конца. Если вы найдете что-нибудь техническое неточное, пожалуйста, оставьте комментарий ниже. Вы также можете поделиться этим на Twitter Если вы найдете это полезным. Кто-то может найти это полезным.

Ссылка

Реагистрационная документация

Оригинал: “https://dev.to/nibble/what-is-forwardingref-and-how-do-you-use-it-2bm6”