React组件能否在内部为props.children的子元素分配ref？

我有一个容器组件，其props.children的类型定义如下：

children?: ReactNode;

实际使用时我需要给第一个子元素绑定ref，用于后续交互触发时的焦点管理。我不想让组件使用者额外通过prop传入ref（使用者本身已经要传入children内容），所以想在容器组件内部完成ref的绑定。
目前写的实现存在类型错误，代码如下：

const firstChildRef = useRef<HTMLElement>(null);
let count = 0;
const clones = React.Children.map(props.children, (child) => {
  const clone = React.cloneElement(child, [{
    ref: count === 0 ? firstChildRef : undefined
  }]);
  count++;
  return clone;
});

有没有可行的方案，能让组件在内部给props.children里的指定子元素分配ref？

完全可以实现，你现有代码有两个核心问题：

• React.cloneElement的第二个参数直接接收要注入的props对象，你额外套了一层数组，参数格式错误
• 没有对children做类型校验，ReactNode包含null、布尔值、字符串、数字、Fragment等无法绑定ref的非元素节点，直接克隆会抛运行时错误

可直接使用的实现代码 #

import { useRef, Children, isValidElement, cloneElement, ReactNode } from 'react';

// 容器组件内部逻辑
const firstChildRef = useRef<HTMLElement>(null);

const renderedChildren = Children.map(props.children, (child: ReactNode, index) => {
  // 非合法React元素直接返回，不做处理
  if (!isValidElement(child)) return child;

  // 给第一个合法子元素注入ref，其余元素原样返回
  if (index === 0) {
    return cloneElement(child, {
      ref: firstChildRef
    })
  }
  return child;
})

几个需要注意的边界情况 #

• 上面的逻辑是按遍历顺序给第一个合法React元素绑定ref，如果需要跳过文本节点、注释节点，只给第一个原生DOM元素绑定ref，可以单独维护一个计数变量，仅在遇到原生标签元素时递增计数，匹配到第一个目标元素时再注入ref
• 如果第一个子元素是自定义函数组件，直接绑定ref会报错，这种情况需要子组件通过forwardRef做ref转发，不推荐用findDOMNode绕，严格模式下会有告警，未来React版本也会废弃这个API
• 注入ref不会覆盖子元素原本自带的ref，React会自动合并多个ref，按顺序完成所有ref的赋值，不需要手动兼容原ref逻辑
• 做焦点管理时，要等DOM挂载完成后再调用firstChildRef.current?.focus()，可以放在useEffect或者交互事件回调里执行，避免拿到空ref

内容的提问来源于stack exchange，提问作者Jonathan.Brink