在你的情况中,错误的原因是因为你错误地理解了useRef
的使用方式。当你使用useRef<SubContainerImperativeRef[]>([])
时,你实际上是在创建一个MutableRefObject<SubContainerImperativeRef[]>
,这意味着ctlChildRefs.current
是一个SubContainerImperativeRef[]
数组,而不是ctlChildRefs
本身。
因此,当你尝试通过索引访问ctlChildRefs[index]
时,TypeScript 编译器会报错,因为它认为ctlChildRefs
是一个MutableRefObject<SubContainerImperativeRef[]>
,而不是一个数组,而MutableRefObject
类型没有定义接受数字索引的索引签名。
正确的访问方式应该是通过ctlChildRefs.current[index]
来访问数组中的元素。ctlChildRefs.current
是实际的数组,你可以使用索引来访问其元素。
修改后的代码应该如下:
// 创建用于装ref的数组:
const ctlChildRefs = useRef<SubContainerImperativeRef[]>([]); // 多个子组件用数组装
// 使用时
const someElement = ctlChildRefs.current[index]; // 正确访问方式
这样,你就可以正确地访问到ctlChildRefs
数组中的元素了。如果index
在数组的有效范围内,这段代码就不会有问题。如果index
可能超出数组范围,你可能还需要添加一些检查来避免运行时错误。
需要如下方式使用: