本文旨在解决在react中，通过映射数组动态生成html元素时，如何将数据高效、正确地传递给事件处理器的问题。核心内容是利用html5的`data-*`属性来存储自定义数据，并在事件处理函数中通过`event.target.dataset`安全地访问这些数据，避免直接使用无效的自定义属性，并讨论了传递复杂对象时的序列化与反序列化策略。
理解React中列表渲染与数据传递的挑战
在React应用中，我们经常需要通过数组的map方法渲染一系列同类型的UI元素（如列表项<li>）。当用户与这些动态生成的元素交互时（例如点击），我们通常需要获取与该元素关联的特定数据。一个常见的误区是尝试直接在原生HTML元素上添加自定义属性来承载数据，例如：
// 错误的示例：直接在原生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元素（如<li>）只支持标准HTML属性。因此，直接添加的airport、lat、name等自定义属性将无法在事件处理函数中通过event.target直接访问。
解决方案：利用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-*属性的值必须是字符串。如果传递的是数字、布尔值或其他类型，它们会自动转换为字符串。
- 对于复杂的JavaScript对象，不能直接将其作为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);
// }
// }
};传递复杂对象时的考量
尽管可以将整个JavaScript对象序列化为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访问，可以有效地解决数据传递问题。对于复杂对象，应谨慎考虑序列化和反序列化的性能影响，并优先传递最小必需的数据集。
