Javascript 从数组生成的元素的子元素的触发单击事件

我正在创建一组div，其中包含id:s列表中的按钮。现在，我想让单击div触发按钮单击。如果我只有一个div，我知道如何使用refs来实现这一点，但是如果我有通过数组映射生成的div，我不知道如何创建refs。如何做到这一点

我的代码：

类MyComponent扩展组件{
构造器（道具：任何）{
超级（道具）；
}
ids=[“a”、“b”、“c”]；
render（）{
返回(
this.ids.map（id=>{
返回(
);
});
)
} 
}

我创建了一个useRefs帮助器来解决这个问题，但这只适用于功能组件

function useRefs<T>(length: number): RefObject<T>[] {
    const refsHolder = useRef<RefObject<T>[]>([]);
    const refs = refsHolder.current;
    for (let i = refs.length; i < length; i++) {
        refs[i] = createRef<T>();
    }
    refs.length = length;
    return refsHolder.current;
}

函数useRefs（长度：数字）：重新对象[]{
const refsHolder=useRef（[]）；
const refs=refsHolder.current；
for（设i=refs.length；i

功能MyComponent（道具）{
const refs=useRefs（id.length）；
返回(
id.map（（id，i）=>{
返回(
);
});
);
}

当前的问题是什么？使用您当前的代码，按钮不会显示，您无法知道所单击按钮的id，有什么问题？@Konstantin我想单击div以触发按钮的单击事件。

function MyComponent(props) {
    const refs = useRefs(ids.length);

    return (
      ids.map((id, i) => {
        return (
          <div ref={refs[i]} id={`div-${id}`}>
            <button id={`btn-${id}`}/>
          </div>
        );
      });
    );
}