React中点击HTML表格行获取经纬度并定位地图问题

需求 #

• 页面左侧为带标记的地图，右侧是HTML表格
• 点击表格行时，获取对应数据的经纬度，让地图定位到该点

原代码问题 #

原表格代码 #

<Table style={{width:'100%',cursor:'pointer'}} id='table'>
  <thead>
      <tr style={{position:'sticky',top:'0px'}}>
        <th style={{width:'45%'}}>Title</th>
        <th style={{width:'30%'}}>Type</th>
        <th style={{width:'25%'}}>Company</th>
      </tr>
  </thead>
  <tbody>
      {geojsonData.features.filter((feature)=>{ return  search.toLowerCase() === '' ? feature : feature.properties.title.toLowerCase().includes(search) || feature.properties.company.toLowerCase().includes(search);})
      .map((feature, index) => {
        // trying to save lat long
        return (
        <tr key={index} onClick={tmp}>
          <td>{feature.properties.title}</td>
          <td>{feature.properties.job_type}</td>
          <td>{feature.properties.company}</td>
        </tr>
      )})}  
    </tbody>
</Table>

原处理函数 #

function tmp(){
var table = document.getElementById("table"),rIndex,cIndex;
// table rows
for (var i =0;i<table.rows.length;i++)
  {
    // row cells
    for (var j=0;j<table.rows[i].cells.length;j++)
      {
        table.rows[i].cells[j] = function()
          {
            rIndex = this.parentElement.rowIndex;
            cIndex = this.cellIndex+1;
            console.log("rows: "+rIndex+", cell:"+cIndex)
          }
      }
  }

当前遇到的问题 #

1. 渲染异常：tmp函数中table.rows.length初始值为null，页面刷新后才返回正确行数55
2. 用useEffect能在组件挂载时获取行数，但无法在外部访问该变量：

useEffect(() => {
rc = document.getElementById('table').rows.length;
console.log(rc);}, []);

正确解决方案 #

核心思路是避免DOM操作，利用React状态管理直接传递经纬度，以下是最终可用代码：

import { useState, useEffect } from 'react';

function YourComponent() {
  // 存储选中的经纬度
  const [selectedCoords, setSelectedCoords] = useState(null);
  // 假设你有地图实例的引用，这里根据实际地图库调整（如Leaflet/Mapbox等）
  const mapInstance = useMap(); // 示例方法，替换为你项目中的地图实例获取方式

  // 监听选中坐标变化，触发地图定位
  useEffect(() => {
    if (selectedCoords && mapInstance) {
      // 地图定位逻辑，以Mapbox为例，其他库调整对应方法
      mapInstance.flyTo({
        center: selectedCoords, // GeoJSON格式为[经度, 纬度]
        zoom: 13 // 自定义缩放级别
      });
    }
  }, [selectedCoords, mapInstance]);

  // 表格行点击处理函数，直接接收当前行的经纬度
  const handleRowClick = (coords) => {
    setSelectedCoords(coords);
  };

  return (
    <div className="container">
      {/* 左侧地图组件 */}
      <div className="map-container">{/* 你的地图组件 */}</div>
      
      {/* 右侧表格 */}
      <Table style={{width:'100%',cursor:'pointer'}}>
        <thead>
          <tr style={{position:'sticky',top:'0px'}}>
            <th style={{width:'45%'}}>标题</th>
            <th style={{width:'30%'}}>类型</th>
            <th style={{width:'25%'}}>公司</th>
          </tr>
        </thead>
        <tbody>
          {geojsonData.features
            .filter(feature => {
              const lowerSearch = search.toLowerCase();
              return lowerSearch === '' 
                ? true 
                : feature.properties.title.toLowerCase().includes(lowerSearch) 
                || feature.properties.company.toLowerCase().includes(lowerSearch);
            })
            .map((feature, index) => {
              // 从GeoJSON的geometry中提取经纬度
              const coords = feature.geometry.coordinates;
              return (
                <tr key={index} onClick={() => handleRowClick(coords)}>
                  <td>{feature.properties.title}</td>
                  <td>{feature.properties.job_type}</td>
                  <td>{feature.properties.company}</td>
                </tr>
              );
            })}  
        </tbody>
      </Table>
    </div>
  );
}

export default YourComponent;

关键优化点 #

• 直接在map渲染表格行时，从feature.geometry.coordinates提取经纬度并绑定到点击事件，无需通过DOM查找行索引
• 使用useState管理选中的经纬度，通过useEffect监听状态变化，自动触发地图定位
• 简化过滤逻辑，提升代码可读性
• 移除不必要的表格ID，避免依赖DOM查询带来的渲染时序问题

内容的提问来源于stack exchange，提问作者Avidqtaqtx