React中列表子组件Ref的高效管理：告别反模式，拥抱官方实践

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

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

  return (
    <li onClick={clickHandler} ref={childRef}>
      {props.key} - {props.item.name}
    </li>
  );
};

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

  return (
    <ol>
      {props.data.map((item: any, index: number) =>
        <Child item={item} key={index} onListItemClick={listItemClickHandler} />
      )}
    </ol>
  );
};

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

function ParentComponent() {
  // 使用useRef来存储一个Map对象，该Map将持有所有子组件的Refs
  // itemsRef.current在组件生命周期内保持不变
  const itemsRef = useRef<Map<string, HTMLElement | null>>(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 (
    <ul>
      {items.map(item => (
        <MyChildComponent
          key={item.id}
          item={item}
          // ref回调函数：当组件挂载时，node是组件实例；当卸载时，node是null
          ref={(node) => {
            const map = getMap();
            if (node) {
              map.set(item.id, node); // 将组件实例存入Map
            } else {
              map.delete(item.id); // 组件卸载时从Map中移除
            }
          }}
        />
      ))}
    </ul>
  );
}

// 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<ChildHandle, MyChildProps>(({ item }, ref) => {
  const liRef = useRef<HTMLLIElement>(null); // 内部DOM元素的ref

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

  return (
    <li ref={liRef} style={{ padding: '10px', borderBottom: '1px solid #eee' }}>
      {item.name} (ID: {item.id})
    </li>
  );
});

export default MyChildComponent;

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<ChildHandle, MyChildProps>(({ item }, ref) => {
  const liRef = useRef<HTMLLIElement>(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 (
    <li ref={liRef} style={{ padding: '10px', borderBottom: '1px solid #eee', transition: 'background-color 0.3s' }}>
      {item.name} (ID: {item.id})
    </li>
  );
});

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<Map<string, ChildHandle | null>>(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 (
    <div style={{ padding: '20px' }}>
      <h1>List of Items</h1>
      <div>
        <button onClick={() => handleScrollToItem('5')} style={{ marginRight: '10px' }}>
          Scroll to Item 5
        </button>
        <button onClick={() => handleScrollToItem('15')}>
          Scroll to Item 15
        </button>
      </div>
      <ul style={{ maxHeight: '300px', overflowY: 'scroll', border: '1px solid #ccc', marginTop: '20px', listStyle: 'none', padding: 0 }}>
        {items.map(item => (
          <MyChildComponent
            key={item.id}
            item={item}
            // ref回调函数：当组件挂载时，node是组件实例；当卸载时，node是null
            ref={(node) => {
              const map = getMap();
              if (node) {
                map.set(item.id, node); // 将组件实例（ChildHandle）存入Map
              } else {
                map.delete(item.id); // 组件卸载时从Map中移除
              }
            }}
          />
        ))}
      </ul>
    </div>
  );
};

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

function App() {
  return (
    <div className="App">
      <ParentComponent />
    </div>
  );
}

export default App;