如何使用钩子访问 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财产吗？但这并不觉得钩子是惯用的。

另外，我有两个问题。

1. 当我在使用<Fragment />返回多个元素的 Preact 组件上设置它时，ref的行为如何。
2. 其次，在 Preact/React 中，出于动画目的访问儿童 DOM 元素是否可以接受/正确做法？(我可以将我的组件包装在另一个包装器div但这会导致比解决问题更多的动画头痛(

Answer 1

您需要将ref作为props传递给子组件。通过这样做buttonElm将指向实际的按钮 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>
);
}