如何使用map()传递组件的ref

import React, { useRef } from 'react';

const ComponentA = () => {
  // 创建一个ref
  const refA = useRef(null);

  return <div ref={refA}>Component A</div>;
};

const ComponentB = () => {
  // 创建一个ref
  const refB = useRef(null);

  return <div ref={refB}>Component B</div>;
};

const ParentComponent = () => {
  // 创建一个数组，包含需要渲染的组件
  const components = [ComponentA, ComponentB];

  return (
    <div>
      {/* 使用map()函数遍历组件数组 */}
      {components.map((Component, index) => {
        // 创建一个回调函数，接收组件的实例作为参数
        const setRef = (ref) => {
          // 在回调函数中，可以将组件的实例存储在一个变量中
          // 在这里可以进行其他操作，如调用组件的方法等
          console.log(`Component ${index + 1}:`, ref);
        };

        // 渲染组件，并为每个组件添加ref属性
        return <Component key={index} ref={setRef} />;
      })}
    </div>
  );
};