如何使用hooks访问Preact中子组件的DOM元素？

Question

我正在使用带有钩子的 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 元素。 我该怎么做？

Should I go ahead and use buttonElm.current.base property? But that does not feel idiomatic with hooks.

另外，我有两个问题。

当我在使用 <Fragment />.

ref

其次，访问儿童的 DOM 元素用于动画目的 acceptable/correct 练习 Preact/React？ （我可以将我的组件包装在另一个包装器中 div 但这会导致比解决问题更多的动画问题）

Answer 1

您需要将 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>
    );
}

如何使用hooks访问Preact中子组件的DOM元素？

How to access the DOM element of the child component in Preact with hooks?

javascript

reactjs

preact

react-hooks