React-Leaflet类组件如何按对象类型动态加载图标、解决this.skill返回undefined问题

问题根因 #

你的写法存在4个核心错误：

• React类组件的状态必须通过this.state.xxx访问，直接调用this.skill/this.skills无法取到state值
• 你把Icon定义为类属性，初始化时组件实例还未完成state构造，自然拿不到对应值
• 单个L.icon实例只能对应一个图标，你要实现多图标必须为每个id动态生成图标实例
• 同时存在this.state（合法状态）和states类属性是错误写法，React类组件的所有状态必须统一放在this.state中

正确实现代码 #

基础实现（动态生成图标） #

import { adsArray } from '../data/arrays'
import L from 'leaflet'
// 若你使用原生Leaflet而非react-leaflet，删除下一行导入即可
import { MapContainer, TileLayer, Marker } from 'react-leaflet'

class Map extends Component {
  constructor(props) {
    super(props);
    // 所有状态统一存放，不要单独定义states类属性
    this.state = {
      center: {
        lat: 52.006376,
        lng: 19.025167,
      },
      zoom: 6.8
    };
  }

  // 封装动态生成图标方法，传入id返回对应图标实例
  getMarkerIcon = (id) => {
    return new L.icon({
      iconUrl: require(`../data/icons/${id}.svg`).default,
      iconSize: new L.Point(60, 75),
      className: 'leaflet-div-icon'
    })
  }

  render() {
    // ========== 原生Leaflet实现逻辑写在这里 ==========
    // 若你不用react-leaflet，在componentDidMount生命周期初始化地图后，遍历adsArray生成marker即可：
    // const map = L.map('map-container').setView(this.state.center, this.state.zoom)
    // L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map)
    // adsArray.forEach(item => {
    //   L.marker([item.lat, item.lng], { icon: this.getMarkerIcon(item.id) }).addTo(map)
    // })
    // return <div id="map-container" style={{height: '100vh'}}></div>

    // ========== react-leaflet实现逻辑 ==========
    return (
      <MapContainer center={this.state.center} zoom={this.state.zoom} style={{height: '100vh'}}>
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
        {/* 遍历数据生成每个点位Marker，自动匹配对应id的图标 */}
        {adsArray.map(item => (
          <Marker 
            key={item.id}
            position={[item.lat, item.lng]} // 替换为你数据里的坐标字段
            icon={this.getMarkerIcon(item.id)}
          />
        ))}
      </MapContainer>
    )
  }
}

优化方案（避免动态require报错） #

如果打包工具无法解析动态路径的require，你可以提前定义图标映射表，性能更稳定：

// 提前导入所有图标，建立id和图标路径的映射
const iconMap = {
  1: require('../data/icons/1.svg').default,
  2: require('../data/icons/2.svg').default,
  3: require('../data/icons/3.svg').default,
  // 补充其他id对应的图标
}

// 然后修改getMarkerIcon方法即可
getMarkerIcon = (id) => {
  return new L.icon({
    iconUrl: iconMap[id],
    iconSize: new L.Point(60, 75),
    className: 'leaflet-div-icon'
  })
}

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