react 渲染多个子组件，同时父组件能够通过引用（ref）访问这些子组件

const ParentComponent = () => {
  const refs = useRef([]);

  const setRef = (ref, index) => {
    refs.current[index] = ref;
  };

  const handlePress = () => {
    refs.current.forEach((ref, index) => {
      if (ref) {
        console.log(`Ref for component ${index}:`, ref);
      }
    });
  };

  return (
    <View>
      {Array.from({ length: 5 }).map((_, index) => (
        <ChildComponent
          key={index}
          ref={ref => setRef(ref, index)}
          text={`Child ${index + 1}`}
        />
      ))}
      <Button title="Log Refs" onPress={handlePress} />
    </View>
  );
};

使用了 useRef Hook 来创建一个可变的容器 refs，用于存储对子组件的引用。
定义了一个 setRef 函数，用来设置 refs 数组中特定索引位置的值。
在 handlePress 函数中，遍历 refs.current 数组，如果某个位置上的引用存在，则打印该引用及其对应的索引。
组件渲染时，通过 Array.from({ length: 5 }) 创建了一个长度为 5 的数组，并映射成 5 个 ChildComponent 实例，每个实例都传递了自己的索引作为 key 并且将 setRef 函数绑定到 ref 属性上，以便在创建子组件时可以收集它们的引用。
最后，组件还包含一个按钮，当用户点击这个按钮时会触发 handlePress 函数，从而输出所有子组件的引用信息。