React-Popper + пользовательские компоненты с помощью хуков

Question

У меня есть набор Компонентов, которые не должны использовать внутреннее реагирование. Я пытаюсь сделать так, чтобы они использовались в качестве эталона при реагировании на поппер. Я понимаю, что решение заключается в использовании forwardRef, однако я потратил часы, пытаясь сделать это без особого успеха.

Есть ли способ, чтобы кто-то мог предоставить образец для простого случая? Вот простой текстовый компонент, который нуждается во внутренней ссылке: как его следует переписать или обернуть, чтобы использовать в качестве ссылки?

import React, { useEffect, useRef } from 'react';

const Textbox = ({
  autofocus,
  ...props
}) => {
  // handle auto-focus
  const node = useRef();
  useEffect(() => {
    if (autofocus) {
      // focus & select the whole text
      node.current.focus();
      node.current.setSelectionRange(0, 9999);
    }
  },
  // do it only once
  []);

  return (
    <input
      type="text"
      ref={node}
      {...props}
    />
  );
};

Answer 1

Конечно! Чтобы использовать этот компонент Textbox в качестве ссылки с помощью реакции-поппера, вам нужно будет использоватьReact.forwardRefчтобы создать новый компонент, который передает базовому элементу. Вот пример того, как вы можете это сделать:

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

const Textbox = forwardRef(({
  autofocus,
  ...props
}, ref) => {
  // handle auto-focus
  const node = useRef(null);
  useEffect(() => {
    if (autofocus) {
      // focus & select the whole text
      node.current.focus();
      node.current.setSelectionRange(0, 9999);
    }
  }, [autofocus]);

  return (
    <input
      type="text"
      ref={ref || node}
      {...props}
    />
  );
});

export default Textbox;

Здесь мы используемforwardRefчтобы создать новый компонент, который принимает в качестве свойства и передает его базовому элементу. Мы также используем его для создания локальной ссылки, которую мы можем использовать для доступа к элементу, если реквизит не указан.

Обратите внимание, что мы добавили значение по умолчанию:nullкuseRefпозвони и мы проедем[autofocus]кuseEffectперехватчик, чтобы избежать отсутствия предупреждения о зависимости.

Благодаря этой настройке вы сможете использовать компонент в качестве ссылки с помощью React-popper следующим образом:

      import { usePopper } from 'react-popper';
import Textbox from './Textbox';

function MyComponent() {
  const [referenceElement, setReferenceElement] = useState(null);
  const [popperElement, setPopperElement] = useState(null);
  const { styles, attributes } = usePopper(referenceElement, popperElement);

  return (
    <>
      <Textbox ref={setReferenceElement} />
      <div ref={setPopperElement} style={styles.popper} {...attributes.popper}>
        ...
      </div>
    </>
  );
}

Здесь мы проходимsetReferenceElementфункция дляrefопораTextboxкомпонент, который позволяет нам позже получить доступ к элементу с помощьюreferenceElement. Мы также проходимsetPopperElementфункцию для элемента, который мы хотим позиционировать относительноinputэлемент с использованием реакции-поппера. Мы используемusePopperкрючок для расчета положения , и мы применяем полученный результатstylesиattributesкdivиспользуя синтаксис распространения.