如何访问子元素的引用

Question

我正在创建一个显示/折叠动画，我需要访问动画元素的高度。所以我需要它在执行动画的组件中的引用（名为CollapseTransition）。我可以通过在父组件中创建一个 ref 并将其转发到动画组件来传递 ref，但在我看来，这是很多代码的方式，我不想在使用我的动画组件时编写 javascript。

有没有办法访问我创建的CollapseTransition 组件中的children 中的ref？

const refTransitionnedElement = useRef(null);

return (
  <div>
    <CollapseTransition visible={visible} ref={refTransitionnedElement}>
      <div ref={refTransitionnedElement}>test</div>
    </CollapseTransition>
  </div>
);

export const CollapseTransition = forwardRef((props: { visible: boolean; children: any; }, ref) => {

  //[...]

  return (
    <>[...]</>
  );
});

最终，我想像这样使用我的CollapseTransition 组件：

<CollapseTransition visible={visible}>
  <div>test</div>
</CollapseTransition>

虽然能够访问我的CollapseTransition 组件中的 div 的高度。

Answer 1

我认为你应该在这里使用渲染道具模式。

export const CollapseTransition = (props: { visible: boolean; children: any; }) => {

  const refTransitionnedElement = useRef(null);

  return (
    <>{children(refTransitionnedElement)}</>
  );
});

而你就是这样使用它的。

return (
  <div>
    <CollapseTransition visible={visible}>
    {(refTransitionnedElement) => (
      <div ref={refTransitionnedElement}>test</div>
    )}
    </CollapseTransition>
  </div>
);

或者你可以使用 React.children.map（它是复合组件模式）。

export const CollapseTransition = (props: { visible: boolean; children: any; }) => {
    
      const refTransitionnedElement = useRef(null);
    
      return (
        <>{React.Children.map(children, (child) => {
          return React.cloneElement(child, {
              ref: refTransitionnedElement
          });
        })}</>
      );
    });

并以这种方式使用它

<CollapseTransition visible={visible}>
  <div>test</div>
</CollapseTransition>

使用这种复合组件解决方案，您需要确保 CollapseTransition 元素只有一个子元素。