Javascript 向数组中传递的组件添加引用

我试图制作一个组件，它将其他组件的列表作为道具，然后根据父级状态中的索引将其中一个组件作为子级进行渲染

最终，我希望能够使用命令式处理程序和forwardRef方法调用数组中子元素的“getValidation”函数。我已经为单个子组件完成了这项工作，但不知道如何使用一系列子组件。我曾想过在父组件中创建一个引用数组，但没有做到这一点。如果您能提供任何帮助，我们将不胜感激，我们非常欢迎您选择其他方式

例如。 家长：

import React，{createRef，useRef，useffect，useState}来自'React'；
const Parent=props=>{
常量[currentChildIndex，setCurrentChildIndex]=useState（0）；
返回(
{
道具.儿童[currentChildIndex]
}
)
};
导出默认父对象；

儿童：

import React,  {forwardRef, useEffect, useImperativeHandle, useRef} from 'react';
const Child = forwardRef((props, ref) => {

  isValidated() {
    //stuff that validates the form
    return true;
  }    

  useImperativeHandle(ref, () => ({
    getValidation() {
        return isValidated();
    }
  }));

  return (
     <div className='child'>
         {form with inputs and things}
     </div>
  )
});
export default Child;

import React，{forwardRef，useffect，useImperialiveHandle，useRef}来自'React'；
const Child=forwardRef（（道具，ref）=>{
isValidated（）{
//验证表单的东西
返回true；
}    
使用命令式句柄（参考，（）=>({
getValidation（）{
返回isValidated（）；
}
}));
返回(
{带有输入和内容的表单}
)
});
导出默认子对象；

因此我不确定这是否是最好的方法，但我在从父组件的渲染方法内部将引用指定到我的数组时遇到了问题，因此我创建了一个函数来渲染子组件，并从渲染方法调用了该函数，它似乎起到了作用：

import React,  {createRef, useRef, useEffect, useState} from 'react';
const Parent = props => {
  const [currentChildIndex, setCurrentChildIndex] = useState(0);

  function renderChildComponent(CurrentComponent) {
      return (
          <CurrentComponent ref={childRefs[currentChildIndex] = createRef()} />
      )
   }

  return (
     <div className='parent'>
         {
             renderChildComponent(props.children[currentChildIndex])
         }
     </div>
  )
};
export default Parent;

import React，{createRef，useRef，useffect，useState}来自'React'；
const Parent=props=>{
常量[currentChildIndex，setCurrentChildIndex]=useState（0）；
函数renderChildComponent（CurrentComponent）{
返回(
)
}
返回(
{
renderChildComponent（props.childrent[currentChildIndex]）
}
)
};
导出默认父对象；

import React,  {createRef, useRef, useEffect, useState} from 'react';
const Parent = props => {
  const [currentChildIndex, setCurrentChildIndex] = useState(0);

  function renderChildComponent(CurrentComponent) {
      return (
          <CurrentComponent ref={childRefs[currentChildIndex] = createRef()} />
      )
   }

  return (
     <div className='parent'>
         {
             renderChildComponent(props.children[currentChildIndex])
         }
     </div>
  )
};
export default Parent;