Как получить доступ к элементу DOM дочернего компонента в Preact с помощью хуков? - PullRequest
Новая
       11

Как получить доступ к элементу DOM дочернего компонента в Preact с помощью хуков?

2 голосов
/ 15 января 2020

Я использую Preact с крючками. У меня есть следующий компонент кнопки: 

export function Button(props) {
    return (
        <button class={props.class}>{props.children}</button>
    );
}

У меня есть другой родительский компонент, для которого мне необходим доступ к фактической кнопке элемента DOM для анимации. 

export function Parent(props) {
    const buttonElm = useRef(null);

    useEffect(() => {

        console.log(buttonElm.current);

        // Animate button using popmotion or similar
    });

    return (
        <div>
            <Button ref={buttonElm}>Click me to animate</Button>
        </div>
    );
}

Однако существует проблема. buttonElm.current указывает на объект JSX, т.е. Button, но не на элемент DOM button. Мне нужно buttonElm, чтобы указать на фактический элемент DOM. Как мне это сделать?

Должен ли я go опередить и использовать свойство buttonElm.current.base? Но это не чувствуется идиоматизм c с крючками.

Кроме того, у меня есть два вопроса.

  1. Как ведет себя ref, когда я устанавливаю это на компоненте Preact, который возвращает несколько элементов с использованием <Fragment />.
  2. Во-вторых, является ли доступ к дочернему элементу DOM с целью анимации приемлемым / правильным для практики в Preact / React? (я могу обернуть свой компонент в другую оболочку div, но это вызывает больше проблем с анимацией, чем решение проблемы)

1 Ответ

2 голосов
/ 15 января 2020

Вам нужно передать ref как props вашему дочернему компоненту. При этом buttonElm будет указывать на фактический элемент Button DOM. 

  export function Button(props) {
        return (
            <button class={props.class} ref={props.buttonElm}>{props.children}</button>
        );
    }

export function Parent(props) {
    const buttonElm = useRef(null);

    useEffect(() => {

        console.log(buttonElm.current);

        // Animate button using popmotion or similar
    });

    return (
        <div>
            <Button buttonElm={buttonElm}>Click me to animate</Button>
        </div>
    );
}
...