react循环调用多个子组件ref

在 React 中，可以通过使用 useRef 函数来在循环中访问多个子组件的引用。首先，在父组件中创建一个 ref 数组，然后在每个子组件中使用 useRef 函数创建一个单独的 ref 并将其保存到父组件中的数组中。例如：

const ParentComponent = () => {
  const refArray = useRef([]);
  const handleClick = index => {
    // Access the ref of the individual child component
    const childComponent = refArray.current[index];
    console.log(childComponent);
  return (
      {[1, 2, 3].map((item, index) => (
        <ChildComponent key={item} ref={ref => (refArray.current[index] = ref)} onClick={() => handleClick(index)} />
const ChildComponent = React.forwardRef((props, ref) => {
  return <button ref={ref} onClick={props.onClick}>{props.children}</button>;
在此代码中，我们在父组件中使用 useRef 函数创建了一个 refArray，并在每个子组件中使用 forwardRef 函数创建了一个单独的 ref，并将其保存到父组件中的 refArray 中。这样就可以在 handleClick 函数中访问每个子组件的 ref，从而操作子组件的内部。