React + TS + react-google-maps（属性 'getZoom' 在类型 'RefObject<GoogleMap>' 上不存在）

Question

我一直在研究 React、TypeScript 和 react-google-maps，目前遇到了 TypeScript 错误。

我想在 onZoomChanged 回调 中检索缩放级别，但 TypeScript 正在抛出

'Property 'getZoom' does not exist on type 'RefObject'

import React, { Component } from 'react'
import { GoogleMap, withGoogleMap, withScriptjs } from 'react-google-maps'
import Marker from './marker'
import Circle from './circle'
import Config from '../infrastructure/config'

class Map extends Component<any, any> {
    private map: React.RefObject<GoogleMap>

    constructor(props: any) {
        super(props)

        this.map = React.createRef()
    }

    onZoomChanged = () => {
        //[ts] Property 'getZoom' does not exist on type 'RefObject<GoogleMap>'
        const zoom = this.map.getZoom()

        alert(zoom)
    }

    render() {
        const markers =
            this.props.markers !== null
                ? this.props.markers.map((marker: any, index: number) => (
                      <Marker
                          key={index}
                          location={{ lat: marker.lat, lng: marker.lng }}
                          info={marker.info}
                          showInfo={marker.showInfo}
                          index={index}
                          toggleInfo={this.props.toggleInfo}
                      />
                  ))
                : null

        const circles =
            this.props.circles !== null
                ? this.props.circles.map((circle: any, index: number) => (
                      <Circle key={index} center={{ lat: circle.lat, lng: circle.lng }} radius={this.props.radius} />
                  ))
                : null

        let center = null

        if (this.props.location !== null) {
            center = { lat: this.props.location.lat, lng: this.props.location.lng }
        } else {
            center = { lat: Config.googleDefaultLat, lng: Config.googleDefaultLng }
        }

        const contents = []

        if (markers !== null) {
            contents.push(markers)
        }

        if (circles !== null) {
            contents.push(circles)
        }

        return (
            <GoogleMap ref={this.map} zoom={this.props.zoom} center={center} onClick={this.props.onClick} onZoomChanged={this.onZoomChanged}>
                {contents.map(c => {
                    return c
                })}
            </GoogleMap>
        )
    }
}

export default withScriptjs(withGoogleMap(Map))

地图参考设置是否正确？为什么说 'getZoom does not exist'？

Answer 1

改变

const zoom = this.map.getZoom()

到

const zoom = this.map.current.getZoom()

已解决，现在缩放时会调用该函数。我不知道您必须添加 .current 才能访问该功能。

React + TS + react-google-maps（属性 'getZoom' 在类型 'RefObject<GoogleMap>' 上不存在）

React + TS + react-google-maps (Property 'getZoom' does not exist on type 'RefObject<GoogleMap>')

typescript

reactjs

react-google-maps