React函数组件转类组件报错求助：Google Maps集成问题

看起来你在把函数组件的Google Maps集成代码转成类组件时踩了两个关键坑：类组件不能使用React Hooks，以及Props类型定义不匹配。我来帮你一步步修正：

核心问题分析 #

1. Hook只能在函数组件中使用：你在类组件的render方法里用了useRef、useState、useEffect，这完全违反了React的Hook规则，React会直接报错。
2. Props类型不匹配：错误提示mapType不存在于组件Props类型中，说明你的IMapProps接口没有正确声明这两个属性，导致TypeScript类型检查失败。

修正后的完整代码 #

首先，先确保你的IMapProps和IMapState接口定义正确：

// 先修正IMapProps和IMapState的定义
export interface IMapProps {
  mapType: google.maps.MapTypeId;
  mapTypeControl: boolean;
}

export interface IMapState {
  // 如果你的状态不需要额外字段，这里可以留空，或者根据需求添加
}

然后是修正后的Map3类组件：

import React from 'react';
import './Map.css';
import { IMapProps, IMapState } from './IMapProps';

type GoogleLatLng = google.maps.LatLng;
type GoogleMap = google.maps.Map;

export class Map3 extends React.Component<IMapProps, IMapState> {
  // 用类实例属性替代useRef
  private mapRef = React.createRef<HTMLDivElement>();
  // 用实例属性存储map对象（不需要放state，因为map变化不需要触发重渲染）
  private map?: GoogleMap;

  constructor(props: IMapProps) {
    super(props);
    // 如果不需要组件内部状态，这里可以初始化空对象
    this.state = {};
  }

  // 替代useEffect的逻辑：组件挂载后初始化地图
  componentDidMount() {
    this.defaultMapStart();
  }

  // 如果Props变化需要重新初始化地图，可以用componentDidUpdate
  componentDidUpdate(prevProps: IMapProps) {
    if (prevProps.mapType !== this.props.mapType || prevProps.mapTypeControl !== this.props.mapTypeControl) {
      this.initMap(5, new google.maps.LatLng(40.166013499, -82.9071));
    }
  }

  private defaultMapStart = (): void => {
    const defaultAddress = new google.maps.LatLng(40.166013499, -82.9071); // Ohio LatLong
    this.initMap(5, defaultAddress);
  };

  private initMap = (zoomLevel: number, address: GoogleLatLng): void => {
    if (this.mapRef.current) {
      this.map = new google.maps.Map(this.mapRef.current, {
        zoom: zoomLevel,
        center: address,
        mapTypeControl: this.props.mapTypeControl,
        streetViewControl: false,
        rotateControl: false,
        scaleControl: true,
        fullscreenControl: false,
        panControl: false,
        zoomControl: true,
        gestureHandling: 'cooperative',
        mapTypeId: this.props.mapType,
        draggableCursor: 'pointer',
      });
    }
  };

  public render(): JSX.Element {
    return (
      <div ref={this.mapRef} className="map-container"></div>
    );
  }
}

关键转换点说明 #

1. 替代useRef：用React.createRef()创建类的实例属性mapRef，在render中绑定到div元素。
2. 替代useState存储map：因为map对象的变化不需要触发组件重渲染，所以直接用类的实例属性this.map存储，比放到state里更高效。
3. 替代useEffect：用componentDidMount在组件挂载后初始化地图；如果需要监听Props变化重新渲染地图，就用componentDidUpdate对比前后Props。
4. 修正Props类型：确保IMapProps接口包含了传入的mapType和mapTypeControl属性，这样TypeScript就不会报错了。

现在你再调用这个组件时，之前的类型错误应该就消失了：

{scriptLoaded && (
  <Map3 mapType={google.maps.MapTypeId.ROADMAP} mapTypeControl={true} />
)}

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