Preact 中如何通过 hooks 访问子组件的 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 属性吗？但这并不符合 Hooks 的习惯。

另外，我有两个问题。

1. 当我在使用<Fragment /> 返回多个元素的 Preact 组件上设置它时，ref 的行为如何。
2. 其次，在 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>
    );
}