引言：列表子组件Ref访问的挑战

在react应用中，我们有时需要从父组件访问子组件的底层dom元素或组件实例，以执行一些命令式操作，例如聚焦、测量尺寸、触发动画或滚动到特定位置。当子组件是列表的一部分时，这个需求变得更加复杂：父组件可能需要管理对多个子组件实例的引用。

一种常见的直觉是，父组件可以通过props向子组件传递一个方法，子组件在内部创建ref后，再将该ref作为参数传递给父组件的方法。例如：

// Child.tsx
export const Child: React.FC = (props: any) => {
  const childRef = useRef(null);

  const clickHandler = () => {
    props.onListItemClick(childRef); // 将childRef传递给父组件的方法
  };

  return (
    

      {props.key} - {props.item.name}
    
  );
};

// Parent.tsx
export const Parent: React.FC = (props: any) => {
  const listItemClickHandler = (clickedChildRef: any) => {
    // 使用子组件ref进行滚动
    if (clickedChildRef && clickedChildRef.current) {
      clickedChildRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  };

  return (
    

      {props.data.map((item: any, index: number) =>
        
      )}
    
  );
};

尽管这种方法在某些场景下可能“奏效”，但它并非React推荐的Ref管理方式，存在以下潜在问题：

1. 非React范式： Ref机制是React提供的一种特定方式，用于绕过数据流直接访问DOM节点或组件实例。通过props传递Ref对象打破了React单向数据流的清晰性，且不易于理解和维护。
2. 耦合性增加： 子组件需要了解父组件的Ref处理逻辑，增加了组件间的耦合。
3. 潜在的生命周期问题： 在组件更新或卸载时，手动管理Ref的添加和移除可能变得复杂且容易出错。

为了更健壮、更符合React范式地解决列表子组件Ref管理问题，我们应该采用React官方推荐的forwardRef、ref回调函数和Map数据结构相结合的方案。

React Ref机制回顾

在深入列表Ref管理之前，我们先回顾一下React中Ref的基本用法：

• useRef Hook： 用于在函数组件中创建Ref对象，它可以持有任何可变值，其.current属性在组件的整个生命周期内保持不变。当用于DOM元素时，它会指向该DOM元素。

  import React, { useRef } from 'react';
  
  function MyComponent() {
    const inputRef = useRef(null);
  
    const handleClick = () => {
      inputRef.current?.focus(); // 聚焦输入框
    };
  
    return (
      <>
        
        Focus Input
      
    );
  }

• forwardRef： 默认情况下，自定义组件不会将Ref转发到其内部的DOM元素。forwardRef是一个高阶组件，它允许父组件将Ref“转发”给子组件内部的DOM元素或另一个组件。

  import React, { forwardRef, useRef, useImperativeHandle } from 'react';
  
  interface MyInputProps {
    placeholder?: string;
  }
  
  // 使用forwardRef转发ref
  const MyInput = forwardRef((props, ref) => {
    // ref会指向内部的input元素
    return ;
  });
  
  function ParentComponent() {
    const myInputRef = useRef(null);
  
    const handleFocus = () => {
      myInputRef.current?.focus();
    };
  
    return (
      <>
        
        Focus MyInput
      
    );
  }

管理列表子组件Ref的官方推荐方案

当需要管理一个列表的Refs时，核心思想是结合forwardRef、ref回调函数和Map数据结构。

1. ref回调函数与Map

为了管理多个Ref，我们需要一个数据结构来存储它们，并且能够根据唯一的标识符（如列表项的id）来检索。Map是理想的选择。

Bing图像创建器

必应出品基于DALL·E的AI绘图工具

下载

ref回调函数允许我们在Ref被设置或取消设置时执行自定义逻辑。当React将Ref绑定到DOM节点或组件实例时，它会调用回调函数并传入该节点/实例；当组件卸载或Ref不再需要时，它会再次调用回调函数并传入null，这为我们提供了清理Ref的机会。

// ParentComponent.tsx
import React, { useRef } from 'react';

function ParentComponent() {
  // 使用useRef来存储一个Map对象，该Map将持有所有子组件的Refs
  // itemsRef.current在组件生命周期内保持不变
  const itemsRef = useRef>(null);

  // 获取或初始化Map的辅助函数
  function getMap() {
    if (!itemsRef.current) {
      itemsRef.current = new Map();
    }
    return itemsRef.current;
  }

  const items = [{ id: '1', name: 'Item A' }, { id: '2', name: 'Item B' }];

  return (
    

      {items.map(item => (
         {
            const map = getMap();
            if (node) {
              map.set(item.id, node); // 将组件实例存入Map
            } else {
              map.delete(item.id); // 组件卸载时从Map中移除
            }
          }}
        />
      ))}
    
  );
}

2. useImperativeHandle：暴露受控接口

通常，当父组件通过Ref获取到子组件实例时，它会得到子组件的DOM节点（如果是DOM元素）或整个组件实例（如果是类组件）。对于函数组件，forwardRef默认会将Ref指向函数组件返回的DOM元素。

然而，我们可能不希望父组件直接操作子组件的内部DOM结构，而是希望子组件暴露一个清晰、受控的API。useImperativeHandle Hook正是为此目的而生。它允许我们自定义通过Ref暴露给父组件的值。

// MyChildComponent.tsx
import React, { forwardRef, useImperativeHandle, useRef } from 'react';

interface MyChildProps {
  item: { id: string; name: string };
}

// 定义子组件暴露给父组件的接口
export interface ChildHandle {
  scrollToMe: () => void;
  // 可以暴露其他方法或属性
  getComponentName: () => string;
}

// 使用forwardRef转发ref，并结合useImperativeHandle
const MyChildComponent = forwardRef(({ item }, ref) => {
  const liRef = useRef(null); // 内部DOM元素的ref

  // 使用useImperativeHandle定义通过ref暴露给父组件的对象
  useImperativeHandle(ref, () => ({
    scrollToMe: () => {
      liRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
    },
    getComponentName: () => `Child-${item.id}`,
  }));

  return (
    

      {item.name} (ID: {item.id})
    
  );
});

export default MyChildComponent;

在这个例子中，父组件通过Ref获取到的不再是原始的

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

interface MyChildProps {
  item: { id: string; name: string };
}

// 定义子组件暴露给父组件的接口
export interface ChildHandle {
  scrollToMe: () => void;
  getComponentName: () => string;
  // 可以在这里添加其他需要暴露给父组件的方法或属性
}

// 使用forwardRef转发ref，并结合useImperativeHandle
const MyChildComponent = forwardRef(({ item }, ref) => {
  const liRef = useRef(null); // 内部DOM元素的ref

  // 使用useImperativeHandle定义通过ref暴露给父组件的对象
  useImperativeHandle(ref, () => ({
    scrollToMe: () => {
      if (liRef.current) {
        liRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
        liRef.current.style.backgroundColor = '#e6f7ff'; // 滚动后高亮
        setTimeout(() => {
          if (liRef.current) liRef.current.style.backgroundColor = ''; // 几秒后恢复
        }, 1000);
      }
    },
    getComponentName: () => `Item-${item.id}`,
  }));

  return (
    

      {item.name} (ID: {item.id})
    
  );
});

export default MyChildComponent;

import React, { useRef } from 'react';
import MyChildComponent, { ChildHandle } from './MyChildComponent'; // 导入子组件及其Handle接口

// 模拟数据
const items = Array.from({ length: 20 }, (_, i) => ({
  id: String(i + 1),
  name: `List Item ${i + 1}`,
}));

export const ParentComponent: React.FC = () => {
  // 使用useRef来存储一个Map对象，该Map将持有所有子组件的Refs
  // itemsRef.current在组件生命周期内保持不变
  const itemsRef = useRef>(null);

  // 获取或初始化Map的辅助函数
  function getMap() {
    if (!itemsRef.current) {
      itemsRef.current = new Map();
    }
    return itemsRef.current;
  }

  // 点击按钮时调用特定子组件的方法
  const handleScrollToItem = (id: string) => {
    const map = getMap();
    const childHandle = map.get(id); // 从Map中获取特定子组件的handle
    if (childHandle) {
      childHandle.scrollToMe(); // 调用子组件暴露的方法
      console.log(`Scrolling to ${childHandle.getComponentName()}`);
    } else {
      console.log(`Item with ID ${id} not found.`);
    }
  };

  return (
    

      
List of Items
      

         handleScrollToItem('5')} style={{ marginRight: '10px' }}>
          Scroll to Item 5
        
         handleScrollToItem('15')}>
          Scroll to Item 15
        
      
      

        {items.map(item => (
           {
              const map = getMap();
              if (node) {
                map.set(item.id, node); // 将组件实例（ChildHandle）存入Map
              } else {
                map.delete(item.id); // 组件卸载时从Map中移除
              }
            }}
          />
        ))}
      
    
  );
};

import React from 'react';
import { ParentComponent } from './ParentComponent';

function App() {
  return (
    

      
    
  );
}

export default App;