本文探讨了在React应用中，如何正确地将自定义数据附加到原生HTML元素（如`
理解原生HTML元素与自定义属性的限制
在React中，当我们将组件渲染为原生HTML元素（例如div, ul, li等）时，我们必须遵守HTML规范。直接向这些原生元素添加非标准属性，如示例中尝试的airport={airport}、lat={airport.latitude}或name={airport.name}，是无效的。浏览器会忽略这些非标准属性，或者即使在DOM中可见，也无法通过标准DOM API（如event.target.property）可靠地访问它们。因此，在事件处理函数中，尝试通过airport.target.lat等方式获取数据会失败，因为这些属性并未被正确地附加到DOM元素上。
使用HTML5 data 属性传递自定义数据
为了在原生HTML元素上存储自定义数据，并能在JavaScript事件处理函数中访问它们，HTML5引入了data属性。data属性以data-前缀开头，后跟自定义的名称，例如data-latitude、data-airport-id等。这些属性的值可以是任何字符串。
当一个元素具有data属性时，可以通过JavaScript中的HTMLElement.dataset属性来访问它们。dataset是一个DOMStringMap对象，其中包含了所有data-属性的键值对，键名是data-后面的部分（自动转换为驼峰命名法）。
立即学习“前端免费学习笔记（深入）”；
示例：正确传递并获取数据
让我们根据原有的问题，修改代码以使用data属性来传递机场信息。
import React, { useState } from 'react';
import { TextField } from '@mui/material'; // 假设你正在使用MUI的TextField
function AirportSelector({ airportsData }) { // 假设airportsData是传入的机场列表
const [first, setFirst] = useState('');
const [resultFirst, setResultFirst] = useState({ airports: airportsData }); // 假设数据源
const handleLiClickFirst = (event) => {
// 通过 event.target.dataset 访问 data 属性
const selectedLatitude = event.target.dataset.latitude;
const selectedLongitude = event.target.dataset.longitude;
const selectedName = event.target.dataset.name;
const selectedIata = event.target.dataset.iata;
// 如果需要完整的机场对象，可以从 data-airport 属性中解析
// 注意：如果 airport 对象很大，不建议直接存储整个对象
const airportDataString = event.target.dataset.airport;
const fullAirportObject = airportDataString ? JSON.parse(airportDataString) : null;
setFirst(selectedName); // 更新输入框显示名称
console.log('Selected Name:', selectedName);
console.log('Selected Latitude:', selectedLatitude);
console.log('Selected Longitude:', selectedLongitude);
console.log('Selected IATA:', selectedIata);
if (fullAirportObject) {
console.log('Full Airport Object:', fullAirportObject);
}
};
return (
<div className="header__first">
<TextField
id="outlined-basic"
label="From"
variant="outlined"
value={first}
onChange={(e) => setFirst(e.target.value.toLocaleLowerCase())}
/>
<ul>
{resultFirst.airports?.map((airport) => (
<li
key={airport.iata}
// 使用 data- 属性来存储数据
data-latitude={airport.latitude}
data-longitude={airport.longitude}
data-name={airport.name}
data-iata={airport.iata}
// 如果需要传递整个对象，必须先将其序列化为JSON字符串
// 但通常建议只传递必要的ID或少量数据
data-airport={JSON.stringify(airport)}
onClick={handleLiClickFirst}
>
{airport.name}
</li>
))}
</ul>
</div>
);
}
export default AirportSelector;注意事项与最佳实践
- 访问方式： 在事件处理函数中，通过event.target.dataset对象来访问data属性。例如，data-latitude对应event.target.dataset.latitude。
- 数据类型： data属性的值始终是字符串。如果需要存储非字符串类型（如数字、布尔值或对象），在设置时它们会被隐式转换为字符串。在读取时，如果需要原始类型，则需要手动进行类型转换（例如，parseInt(event.target.dataset.latitude)）。
-
传递复杂对象： 如果需要传递一个完整的JavaScript对象（如示例中的airport对象），必须先使用JSON.stringify()将其序列化为JSON字符串，然后在事件处理函数中通过JSON.parse()将其反序列化。
data-airport={JSON.stringify(airport)}const fullAirportObject = JSON.parse(event.target.dataset.airport);
-
避免冗余数据： 尽量避免在data属性中存储过大或复杂的对象。这会增加HTML元素的DOM大小，可能影响性能，并且使HTML结构变得臃肿。如果只需要部分数据，只传递那部分数据。如果需要完整的对象，更好的做法是只传递一个唯一标识符（如airport.iata），然后在事件处理函数中根据这个ID从React的状态、Context或全局数据源中查找完整的对象。
例如，只传递iata：
<li key={airport.iata} data-iata={airport.iata} onClick={handleLiClickFirst}> {airport.name} </li>然后在处理函数中：
const selectedIata = event.target.dataset.iata; const fullAirportObject = resultFirst.airports.find(a => a.iata === selectedIata);
总结
在React中，当需要将自定义数据附加到原生HTML元素上，并在事件处理函数中访问这些数据时，HTML5的data属性是标准且推荐的解决方案。通过data-attribute-name语法设置属性，并通过event.target.dataset.attributeName在JavaScript中获取数据，可以有效避免直接使用非标准属性带来的问题。同时，合理规划所存储的数据量和类型，尤其是在处理复杂对象时，以保持代码的性能和可维护性。
