父组件循环遍历创建多个子组件，但是想要命令式控制子组件（forwardRef + useImperativeHandle），那么是需要在父组件创建多个ref进行传输吗？

Question

父组件循环遍历创建多个子组件，但是想要命令式控制子组件（forwardRef + useImperativeHandle），那么是需要在父组件创建多个ref进行传输吗？

父组件创建了多个子组件：

...
<div>
  {
    props.data.map((item, index) => (
      <div  key={index}>
        <SubContainer {...item}  /* 这里需要每个子组件都传递ref吗 ref={ctlChildRef} */ >
        </SubContainer>
      </div>
    ))
  }
</div>

1、是否必须给每个子组件传入ref是吗？

2、如果是，是如何在父组件循环创建多个ref呢？因为ref的名称不能用循环的index组合，这里应该如何做的呢？

---

更新-1

我的需求是：

我有一个组件，UI图如下：

给定props然后遍历data创建多个子组件（白色背景的就是一个子组件）

然后，我需要在父组件（整个大的淡蓝色背景的组件）进行命令式控制子组件内的操作。

比如我父组件点击一个按钮（这里传输子组件的id，和子组件内的item内的id）那么就相应地focus（变颜色）。

Answer 1

这或许不是最好的解决方法，能描述一下你的需求吗？

Answer 2

需要遍历获取 Ref，可参考：

import React, { forwardRef, useImperativeHandle, useMemo } from 'react';

interface ChildProps {
  name: string;
}
interface ChildRef {
  active(): void;
}

const Child = forwardRef<ChildRef, ChildProps>((props, ref) => {
  const { name } = props;

  useImperativeHandle(
    ref,
    () => ({
      active() {},
    }),
    []
  );

  return <div>{name}</div>;
});

export function Demo() {
  const data = [
    {
      id: '1',
      name: 'child1',
    },
    {
      id: '2',
      name: 'child2',
    },
  ];
  const childRefs = useMemo<Map<string, ChildRef>>(() => new Map(), []);

  const registerRef = (id: string, r: ChildRef) => {
    childRefs.set(id, r);
    return () => {
      childRefs.delete(id);
    };
  };

  const handleActive = () => {
    childRefs.get('1')?.active();
  };

  return (
    <div>
      <button onClick={handleActive}>激活 child1</button>
      {data.map((item) => (
        <Child
          key={item.id}
          name={item.name}
          ref={(r: ChildRef) => registerRef(item.id, r)}
        />
      ))}
    </div>
  );
}

Answer 3

1：是，2. 子元素通过回调的形式绑定ref，并记录在父元素创建的Map中统一管理。
具体可参考REACT给出的管理ref列表的示例：https://zh-hans.react.dev/learn/manipulating-the-dom-with-ref...