React + TS + response-google-maps (свойство 'getZoom' не существует для типа 'RefObject <GoogleMap>') - PullRequest
Новая
       33

React + TS + response-google-maps (свойство 'getZoom' не существует для типа 'RefObject <GoogleMap>')

0 голосов
/ 30 сентября 2018

Я играл с React, TypeScript и реагировать-google-maps и в настоящее время застрял на ошибке TypeScript.

Я хочу получить уровень масштабирования в обратном вызове onZoomChanged но TypeScript выбрасывает

'Свойство' getZoom 'не существует для типа' 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 не существует»?

1 Ответ

0 голосов
/ 30 сентября 2018

Изменение

const zoom = this.map.getZoom ()

на

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

решает его, и теперь функция вызывается при масштабировании.Я не знал, что вам нужно было добавить .current для доступа к функции.

...