在react列表中引用（ref）子项并访问子组件实例
本文探讨如何在React中为列表的每个子项设置ref，从而在父组件中访问这些子组件的实例。
问题描述：
假设有一个数组arr，包含数量不定的元素。我们需要为每个子项组件A设置一个ref，以便在父组件中访问每个A组件的实例。
示例代码（问题代码）：
<code class="javascript">class Demo {
render() {
return (
arr.map((item, index) => {
<a ref="{/*"></a> // 此处ref设置不正确
})
);
}
}</code>
解决方案：使用useRef钩子和闭包
为了动态地为列表中的每个元素设置ref，我们可以结合使用useRef钩子和闭包。
方法一：在子组件中使用useRef
<code class="javascript">import { useRef } from 'react';
const Demo = () => {
const refList = useRef([]);
return (
<>
{arr.map((item, idx) => (
<A ref={(node) => { refList.current[idx] = node; }} key={idx} />
))}
</>
);
};</code>
在这个例子中：
-
useRef([])创建一个可变的ref数组，初始为空。 - 闭包
{(node) => { refList.current[idx] = node; }}将每个子组件的实例赋值到refList.current数组的对应索引位置。 -
key={idx}为列表中的每个元素提供唯一的key，这是React渲染列表的最佳实践。 缺少key会导致性能问题和潜在的bug。
方法二：在父组件中使用useRef并直接分配ref
<code class="javascript">import { useRef } from 'react';
const Demo = () => {
const refList = useRef(Array(arr.length).fill(null)); // 预先分配空间
return (
<>
{arr.map((item, idx) => (
<A ref={refList.current[idx]} key={idx} />
))}
</>
);
};</code>
这种方法在父组件中预先创建一个与arr长度相同的null值数组，然后在渲染列表时直接将ref赋值给数组中的对应元素。 访问子组件实例时，可以直接通过refList.current[index]访问。
在父组件中访问子组件实例：
无论使用哪种方法，你都可以通过refList.current数组访问子组件实例。例如，要访问第二个子组件的实例，可以使用refList.current[1]。 记住检查refList.current[index]是否为null，以避免错误。
重要提示：
-
key属性: 在渲染列表时，务必为每个子项添加唯一的key属性。这对于React高效地更新和渲染列表至关重要。 -
null检查: 在访问refList.current[index]之前，务必检查它是否为null，以避免潜在的错误。 这尤其在组件尚未挂载或卸载时很重要。 -
组件生命周期: 记住ref在组件挂载后才可用。 如果在组件挂载之前尝试访问ref，则会得到
null。
通过以上方法，你可以有效地管理和访问React列表中子组件的实例，从而实现更复杂的交互和状态管理。
