React中如何为通过props传入的子组件设置ref？

当子组件通过props的React.ReactNode[]数组传入时，无法直接给已创建的元素设置ref，需要借助React.cloneElement克隆原元素并附加ref属性，以下是具体实现方式：

单个子组件的场景 #

将ref定义为类实例属性（避免每次render重新创建），通过React.cloneElement克隆传入的子组件并添加ref：

export interface IProps {
  Tools: React.ReactNode[];
}
    
export interface IState {
  Tools: React.ReactNode[];
}
    
export class ParentComponent extends React.Component<IProps, IState> {
  // 初始化ref为实例属性，保证引用稳定
  childRef = React.createRef<HTMLElement | React.Component>();

  constructor(props: IProps) {
    super(props);
    this.state = {
      Tools: this.props.Tools
    };
  }

  render(): React.ReactNode {
    const firstTool = this.state.Tools[0];
    // 仅处理有效React元素，避免非元素类型报错
    if (React.isValidElement(firstTool)) {
      const toolWithRef = React.cloneElement(firstTool, {
        ref: this.childRef
      });
      return <h1>{toolWithRef}</h1>;
    }
    return <h1>{firstTool}</h1>;
  }
}

export default ParentComponent;

多个子组件的场景 #

如果要给数组内所有子组件设置ref，可以用数组存储对应ref实例：

export class ParentComponent extends React.Component<IProps, IState> {
  // 为每个子组件创建独立的ref
  childRefs = this.props.Tools.map(() => React.createRef<HTMLElement | React.Component>());

  constructor(props: IProps) {
    super(props);
    this.state = {
      Tools: this.props.Tools
    };
  }

  render(): React.ReactNode {
    const toolsWithRefs = this.state.Tools.map((tool, index) => {
      if (React.isValidElement(tool)) {
        return React.cloneElement(tool, {
          ref: this.childRefs[index]
        });
      }
      return tool;
    });
    return <div>{toolsWithRefs}</div>;
  }
}

关键说明 #

• React.cloneElement是React官方提供的克隆元素API，会保留原元素的props、子节点，同时允许添加/覆盖新属性（比如ref）。
• 必须用React.isValidElement做类型判断，因为React.ReactNode可包含字符串、数字、null等非元素类型，直接克隆会抛出错误。
• ref需定义为类的实例属性，不能在render内部声明，否则每次render都会生成新的ref实例，导致引用丢失。

内容的提问来源于stack exchange，提问作者iman kari