如何用钩子组件访问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元素。，我该怎么做？

我应该继续使用buttonElm.current.base属性吗？但这并不是用钩子做的习语。

另外，我有两个问题。

当我在使用<Fragment />.

• Second，返回多个元素的Preact组件上设置它时，

1. 是如何表现的？(我可以将组件封装在另一个包装器div中，但这比解决问题更让动画头疼)

Answer 1

您需要将ref作为props传递给您的子组件。通过这样做，buttonElm将指向实际的Button元素。

  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>
    );
}