Question

我一直在使用React，TypeScript和react-google-maps，目前因TypeScript错误而停留。

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

类型“ RefObject”上不存在“属性'getZoom'

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不存在”？

Answer 1

更改

const zoom = this.map.getZoom（）

到

const zoom = this.map.current.getZoom（）

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

React + TS + react-google-maps（类型“ RefObject <googlemap>”不存在属性“ getZoom”）

1 个答案: