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

debugcn 发表于 Dev

夏尔·帕蒂尔

我正在使用带有钩子的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财产吗？但这对钩子来说并不是惯用的。

另外，我有两个问题。

ref在将Preset组件设置为使用会返回多个元素的Preact组件上时，该如何操作<Fragment />？
其次，在Preact / React中为动画目的访问子级DOM元素是否可接受/正确？（我可以将组件包装到另一个包装器中，div但这比解决问题引起更多的动画麻烦）

凯斯

你需要通过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>
    );
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。