javascript - Preact 中如何通过 hooks 访问子组件的 DOM 元素？

Question

我正在使用带有钩子(Hook)的 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.

另外，我有两个问题。

ref如何当我在使用 <Fragment /> 返回多个元素的 Preact 组件上设置它时的行为.

其次，在 Preact/React 中出于动画目的访问子 DOM 元素是否可以接受/正确做法？ (我可以将我的组件包装在另一个包装器中 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>
    );
}