将refs添加到以数组传递的组件

// 父组件
import React, { createRef } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRefs = []; // 创建一个数组来存储子组件的ref
  }

  componentDidMount() {
    // 访问子组件的方法或属性
    this.childRefs.forEach(childRef => {
      console.log(childRef.current); // 输出子组件的实例
      childRef.current.someMethod(); // 调用子组件的方法
    });
  }

  render() {
    const children = [1, 2, 3].map((item, index) => {
      const ref = createRef(); // 创建一个ref对象
      this.childRefs.push(ref); // 将ref对象添加到数组中
      return <ChildComponent key={index} forwardedRef={ref} />;
    });

    return <div>{children}</div>;
  }
}

export default ParentComponent;

// 子组件
import React from 'react';

const ChildComponent = React.forwardRef((props, ref) => {
  // 在子组件中使用ref对象
  return <div ref={ref}>Child Component</div>;
});

export default ChildComponent;