面试题：React中使用Refs处理动态列表元素的事件委托

Question

在一个使用React构建的动态列表中，列表项数量会根据数据动态变化。要求通过Refs结合事件委托机制，实现当点击任意列表项时，能够获取到该项的数据，并进行相应处理。请阐述具体实现方案，并给出主要代码片段。

Answer 1

实现方案

1. 创建Refs对象：在组件中创建一个ref对象，用于存储列表项的引用。
2. 绑定事件委托：在列表的父元素上绑定点击事件，利用事件委托机制，减少事件绑定数量。
3. 获取点击项数据：在点击事件处理函数中，通过event.target找到被点击的列表项，并从ref对象中获取该项对应的数据。

主要代码片段

import React, { useRef } from'react';

const DynamicList = () => {
  const listRefs = useRef({});
  const dataList = [
    { id: 1, value: 'Item 1' },
    { id: 2, value: 'Item 2' },
    { id: 3, value: 'Item 3' }
  ];

  const handleClick = (event) => {
    const targetId = event.target.dataset.id;
    const clickedData = listRefs.current[targetId];
    if (clickedData) {
      // 进行相应处理，例如打印数据
      console.log('Clicked data:', clickedData);
    }
  };

  return (
    <ul onClick={handleClick}>
      {dataList.map(item => (
        <li
          key={item.id}
          data-id={item.id}
          ref={el => listRefs.current[item.id] = item}
        >
          {item.value}
        </li>
      ))}
    </ul>
  );
};

export default DynamicList;