<li
  key={airport.iata}
  airport={airport} // 尝试直接传递对象
  onClick={handleLiClickFirst}
  lat={airport.latitude} // 尝试传递单个属性
  name={airport.name}
  long={airport.longitude}
>
  {airport.name}
</li>

然而，这种做法存在问题。原生HTML元素（如

解决方案：利用HTML5 Data属性

HTML5引入了data-*属性，允许开发者在标准HTML元素上存储自定义数据。这些属性以data-为前缀，后面跟着自定义的名称（例如data-latitude、data-name）。浏览器会将其视为有效的HTML属性，并且可以通过J*aScript的dataset API轻松访问。

1. 在JSX中设置Data属性

要正确地将数据附加到HTML元素上，我们需要将自定义属性转换为data-*格式。

示例代码：

import React, { useState } from 'react';
import { TextField } from '@mui/material'; // 假设使用Material-UI的TextField

function AirportSearch() {
  const [first, setFirst] = useState('');
  const [resultFirst, setResultFirst] = useState({
    airports: [
      { iata: 'JFK', name: 'John F. Kennedy International Airport', latitude: 40.6413, longitude: -73.7781 },
      { iata: 'LAX', name: 'Los Angeles International Airport', latitude: 33.9416, longitude: -118.4085 },
      { iata: 'ORD', name: 'O\'Hare International Airport', latitude: 41.9742, longitude: -87.9073 },
    ],
  });

  const handleLiClickFirst = (event) => {
    // 数据将从event.target.dataset中读取
    const { latitude, longitude, name, iata, airportdata } = event.target.dataset;

    console.log('点击的机场名称:', name);
    console.log('点击的机场纬度:', latitude);
    console.log('点击的机场经度:', longitude);
    console.log('点击的机场IATA:', iata);

    if (airportdata) {
      const airportObject = JSON.parse(airportdata);
      console.log('完整的机场对象:', airportObject);
      setFirst(airportObject.name); // 设置输入框的值为机场名称
    } else {
      setFirst(name); // 如果没有完整对象，则使用名称
    }
  };

  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-iata={airport.iata}
            data-latitude={airport.latitude}
            data-longitude={airport.longitude}
            data-name={airport.name}
            // 如果需要传递整个对象，必须将其JSON字符串化
            data-airportdata={JSON.stringify(airport)}
            onClick={handleLiClickFirst}
          >
            {airport.name}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default AirportSearch;

关键点：

一站式AI创作平台，免费AI图片和视频生成。

• data-latitude={airport.latitude}: 对于简单的数值或字符串，直接赋值即可。
• data-airportdata={JSON.stringify(airport)}: 如果你需要传递一个完整的J*aScript对象，必须使用JSON.stringify()将其转换为JSON字符串。这是因为HTML属性的值只能是字符串。

2. 在事件处理器中访问Data属性

在事件处理器中，可以通过event.target.dataset属性来访问所有data-*属性。dataset是一个DOMStringMap对象，其中包含所有以data-开头的属性，属性名会被自动转换为驼峰命名法（例如，data-latitude会变成dataset.latitude）。

示例代码：

const handleLiClickFirst = (event) => {
    // 从event.target.dataset中解构出数据
    const { latitude, longitude, name, iata, airportdata } = event.target.dataset;

    console.log('点击的机场名称:', name);
    console.log('点击的机场纬度:', latitude);
    console.log('点击的机场经度:', longitude);
    console.log('点击的机场IATA:', iata);

    if (airportdata) {
      // 如果传递的是字符串化的对象，需要使用JSON.parse()将其解析回来
      const airportObject = JSON.parse(airportdata);
      console.log('完整的机场对象:', airportObject);
      setFirst(airportObject.name);
    } else {
      setFirst(name);
    }
  };

关键点：

• event.target.dataset：这是一个包含所有data-*属性的对象。
• 属性名转换：data-latitude在dataset中对应dataset.latitude。
• JSON.parse(airportdata)：如果之前使用了JSON.stringify()来存储对象，那么在读取时必须使用JSON.parse()将其转换回J*aScript对象。

最佳实践与注意事项

1. 优先传递所需特定属性： 尽可能只传递事件处理器中实际需要的特定属性，而不是整个对象。这可以避免创建过长的HTML属性字符串，减少DOM的大小，并提高性能。
2. 避免过大的数据： data-*属性适合存储少量、简单的字符串数据。如果需要传递大量复杂的数据，或者数据会频繁变动，考虑其他React惯用的状态管理方法（如Context API、Redux）或直接在onClick处理器中通过闭包传递数据（例如 onClick={() => handleLiClickFirst(airport)}，但这不属于通过HTML属性传递数据）。
3. 数据类型： data-*属性的值始终是字符串。因此，即使你存储的是数字或布尔值，读取时也需要注意它们是字符串类型，可能需要进行类型转换（例如Number(latitude)）。
4. 可访问性： data-*属性主要用于存储与元素相关的自定义数据，不应滥用它们来改变元素的语义或视觉呈现。对于需要向辅助技术公开的信息，应优先使用标准的ARIA属性。

总结

在React中，当需要通过HTML属性向原生元素传递数据并在事件处理器中访问时，使用HTML5的data-*属性是标准且有效的方法。通过在JSX中将数据（包括字符串化的对象）设置为data-*属性，并在事件处理器中使用event.target.dataset来访问，可以优雅地解决数据传递问题。遵循最佳实践，优先传递精简数据，并注意数据类型转换，能够确保代码的健壮性和可维护性。