如何在TypeScript中为props.children的每个子组件创建并传递Ref

问题原因 #

函数组件默认不支持直接接收ref属性，必须通过React.forwardRef显式转发Ref到内部的DOM元素或类组件。你遇到的错误就是因为Slide是函数组件，直接传递ref会失效。

解决步骤 #

1. 用forwardRef改造Slide组件 #

将Slide组件包裹在forwardRef中，让它能接收并转发Ref到内部根DOM元素，同时完善TypeScript类型定义：

import React, { forwardRef, PropsWithChildren } from 'react';

type SlideProps = PropsWithChildren<{}>;

// forwardRef泛型参数：[转发的Ref对应的DOM类型, 组件Props类型]
const Slide = forwardRef<HTMLDivElement, SlideProps>((props, ref) => {
  return (
    <div ref={ref} className="slide">
      {props.children}
    </div>
  );
});

export default Slide;

2. 修正Slider组件的Ref处理逻辑 #

正确创建Ref数组，遍历子组件时为每个Slide传递对应Ref，同时处理props.children可能不是数组的情况：

import React, { useRef, PropsWithChildren, ReactElement } from 'react';
import Slide from './Slide';
import useSlideAnimation from './useSlideAnimation';

type SliderProps = PropsWithChildren<{}>;

function Slider(props: SliderProps) {
  // 将children转为数组，避免单个子组件无法遍历的问题
  const slides = React.Children.toArray(props.children) as ReactElement<SlideProps>[];
  
  // 创建与Slide数量对应的Ref数组
  const slidesRefs = slides.map(() => useRef<HTMLDivElement>(null));
  
  // 克隆子组件并传递Ref
  const childrenWithRefs = slides.map((child, index) => {
    return React.cloneElement(child, { ref: slidesRefs[index] });
  });

  const slideAnimation = useSlideAnimation(slidesRefs);

  return (
    <div className="slider">
      {childrenWithRefs}
    </div>
  );
}

export default Slider;

3. 动画钩子示例（useSlideAnimation） #

如果需要通过Ref操作DOM实现动画，示例逻辑如下：

import { useEffect } from 'react';

function useSlideAnimation(slidesRefs: React.RefObject<HTMLDivElement>[]) {
  useEffect(() => {
    slidesRefs.forEach((ref, index) => {
      if (ref.current) {
        // 这里可以执行动画逻辑，比如设置位移、透明度等
        ref.current.style.transform = `translateX(${index * 100}%)`;
      }
    });
  }, [slidesRefs]);
}

export default useSlideAnimation;

内容的提问来源于stack exchange，提问作者Alexander Kolarov