// 错误的示例：直接在原生HTML元素上添加自定义属性
<li
  key={airport.iata}
  airport={airport} // 无效的自定义属性
  onClick={handleLiClickFirst}
  lat={airport.latitude} // 无效的自定义属性
  name={airport.name}
  long={airport.longitude}
>
  {airport.name}
</li>

以及对应的事件处理函数中尝试访问：

const handleLiClickFirst = (event) => {
  // event.target.innerHTML 可以获取到内部文本
  setFirst(event.target.innerHTML);
  // 尝试访问 event.target.lat 会失败，因为 'lat' 不是原生HTML元素的有效属性
  console.log(event.target.lat);
};

这种做法的问题在于，浏览器不会将任意的自定义属性视为DOM元素的有效属性并将其存储在event.target上。原生HTML元素（如

解决方案：利用HTML5 Data属性

HTML5引入了data-*属性，专门用于在标准HTML元素上存储自定义数据。这些属性以data-为前缀，后面跟着自定义的名称（例如data-latitude，data-airport-id）。在React中，我们可以将这些data-*属性添加到JSX元素上，并在事件处理函数中通过event.target.dataset对象来访问它们。

1. 设置Data属性

将需要传递的数据作为data-*属性添加到对应的JSX元素上。属性名将自动转换为驼峰命名法（例如data-latitude在dataset中会变成latitude）。

小米旗下小爱开放平台

// 正确的示例：使用 data-* 属性传递数据
<div className="header__first">
  {/* ... 其他组件 ... */}
  <ul>
    {resultFirst.airports?.map((airport) => (
      <li
        key={airport.iata}
        onClick={handleLiClickFirst}
        data-iata={airport.iata} // 传递 IATA 编码
        data-latitude={airport.latitude} // 传递纬度
        data-longitude={airport.longitude} // 传递经度
        data-name={airport.name} // 传递名称
        // 如果需要传递整个对象，可以将其序列化为JSON字符串
        // data-airport-data={JSON.stringify(airport)}
      >
        {airport.name}
      </li>
    ))}
  </ul>
</div>

注意事项：

• data-*属性的值必须是字符串。如果传递的是数字、布尔值或其他类型，它们会自动转换为字符串。
• 对于复杂的J*aScript对象，不能直接将其作为data-*属性的值。你需要先将其序列化为JSON字符串，如JSON.stringify(airport)。

2. 访问Data属性

在事件处理函数中，event.target.dataset会返回一个DOMStringMap对象，其中包含了所有data-*属性。你可以通过点语法或方括号语法访问这些属性，属性名会自动从烤串命名（kebab-case）转换为驼峰命名（camelCase）。

const handleLiClickFirst = (event) => {
  const { target } = event;

  // 获取 li 元素的文本内容
  setFirst(target.innerHTML);

  // 通过 target.dataset 访问 data-* 属性
  const iata = target.dataset.iata;
  const latitude = target.dataset.latitude;
  const longitude = target.dataset.longitude;
  const name = target.dataset.name;

  console.log('IATA:', iata);
  console.log('Latitude:', latitude);
  console.log('Longitude:', longitude);
  console.log('Name:', name);

  // 如果传递了整个序列化的对象，需要进行反序列化
  // const airportDataString = target.dataset.airportData;
  // if (airportDataString) {
  //   try {
  //     const airportObject = JSON.parse(airportDataString);
  //     console.log('Airport Object:', airportObject);
  //     // 进一步使用 airportObject.latitude 等
  //   } catch (e) {
  //     console.error('Failed to parse airport data:', e);
  //   }
  // }
};

传递复杂对象时的考量

尽管可以将整个J*aScript对象序列化为JSON字符串并存储在data-*属性中，但这种做法需要权衡：

• 优点： 可以在事件处理函数中获取到完整的对象信息。
• 缺点：
  • 性能开销： JSON字符串可能很长，尤其对于大型对象，这会增加DOM的大小和内存消耗。
  • 解析开销： 在每次事件触发时，都需要进行JSON.parse操作，这会带来额外的CPU开销。
  • 可读性： 在HTML中查看时，长字符串会降低可读性。

最佳实践建议： 如果只需要对象中的少数几个属性，优先只将这些必要的属性作为单独的data-*属性传递。例如，如果只需要latitude和longitude，就只传递data-latitude和data-longitude。只有当确实需要整个对象或大部分属性时，才考虑使用JSON.stringify。

总结

在React中处理列表项的事件时，为了将动态数据从映射的数组元素传递到事件处理器，最健壮和标准的方法是使用HTML5的data-*属性。通过在JSX中设置data-key={value}，然后在事件处理函数中通过event.target.dataset.key访问，可以有效地解决数据传递问题。对于复杂对象，应谨慎考虑序列化和反序列化的性能影响，并优先传递最小必需的数据集。