第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

Google-Maps-React 與 TypeScript。參數(shù)錯誤

Google-Maps-React 與 TypeScript。參數(shù)錯誤

HUH函數(shù) 2022-11-11 10:48:47
所以我在這個文件中使用了 TypeScript。import React, {Component} from 'react'import {Map, InfoWindow, Marker, GoogleApiWrapper, mapEventHandler, markerEventHandler} from 'google-maps-react';import { coordinates } from '../customerPage'const mapStyle = {    width: '920px',    height: '500px'}export class MapContainer extends Component{    onMapClicked: mapEventHandler;    onMarkerClick: markerEventHandler;    onInfoWindowClose: any;    map?: google.maps.Map | google.maps.StreetViewPanorama    render(){        return(            <>                <Map google={google}                      zoom={16}                     draggable                     initialCenter={{                        lat: coordinates.latitude,                        lng: coordinates.longitude                     }}                     onReady={(mapProps, map) => {                        this.setState({ map: map as google.maps.Map})                    }}                     style={mapStyle}                     onClick={this.onMapClicked}>                                    <Marker onClick={this.onMarkerClick}                            title={`Location of ...`} />                </Map>                <p className="float-left md:ml-0 mt-64 lg:ml-48 sm:pt-64 lg:pt-64">                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 rounded shadow">Alarm</button>                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 xs:ml-20 sm:ml-20 md:ml-32 lg:ml-40 rounded shadow">Unlock</button>                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 xs:ml-20 sm:ml-20 md:ml-32 lg:ml-40 rounded shadow">Reset</button>                </p>            </>        )    }}這有點令人沮喪。我不明白他們在尋找什么。我能夠讓地圖與 JSX 一起工作，但不能與 TSX 一起工作。我嘗試將道具分配給 MainContainer 但它不會改變任何東西..
查看完整描述

3 回答

?
幕布斯6054654

TA貢獻1876條經驗 獲得超7個贊

如果有人想要一種功能組件方式來實現(xiàn)這一點并讓它識別道具，只需參考包裝器。


import { useState } from 'react';

import PlacesAutocomplete from 'react-places-autocomplete';

import { GoogleApiWrapper, IProvidedProps } from 'google-maps-react';


interface PlacesAutocompleteProps {

    value: string;

    disabled?: boolean;

    onChange: () => void;

    counrtyResctrictions?: string[];

}


const PlacesAutoComplete = ({

    onChange,

    value,

    disabled,

    counrtyResctrictions = [],

}: PlacesAutocompleteProps & IProvidedProps) => {

    

    return (

        <PlacesAutocomplete>

        </PlacesAutocomplete>

    );

};


export default GoogleApiWrapper({

    apiKey: process.env.REACT_APP_FB_API_KEY!,

    language: 'en',

})<PlacesAutocompleteProps & IProvidedProps>(PlacesAutoComplete);


查看完整回答
反對 回復 2022-11-11
?
犯罪嫌疑人X

TA貢獻2080條經驗 獲得超4個贊

我將粘貼適用于 .TSX 的部分代碼


class App extends React.Component<any, any> {

  constructor(props: any) {

    super(props);


    // ... 

  }

}


export default GoogleApiWrapper(

  (props: any) => ({

    apiKey: <your_key>

  }

))(App)


查看完整回答
反對 回復 2022-11-11
?
料青山看我應如是

TA貢獻1772條經驗 獲得超8個贊

老實說，我沒有太大變化。我主要添加了它要求的 <{google}> 參數(shù)，它似乎正在尋找它丟失的那個道具。我正在使用 Visual Studio Code，它有時也會為我緩慢地處理錯誤，這可能會首先說明為什么會出現(xiàn)問題。


import React, {Component} from 'react'

import {Map, InfoWindow, Marker, GoogleApiWrapper, mapEventHandler, markerEventHandler} from 'google-maps-react';

import { coordinates } from '../customerPage'


const mapStyle = {

    width: '920px',

    height: '500px'

}


export class MapContainer extends Component<{google}>{

    onMapClicked: mapEventHandler;

    onMarkerClick: markerEventHandler;

    onInfoWindowClose: any;

    map?: google.maps.Map | google.maps.StreetViewPanorama


    render(){

        return(

            <>

                <Map google={google} 

                     zoom={16}

                     draggable

                     initialCenter={{

                        lat: coordinates.latitude,

                        lng: coordinates.longitude

                     }}

                     onReady={(mapProps, map) => {

                        this.setState({ map: map as google.maps.Map})

                    }}

                     style={mapStyle}

                     onClick={this.onMapClicked}>

                

                    <Marker onClick={this.onMarkerClick}

                            title={`Location of ...`} />

                </Map>

                <p className="float-left md:ml-0 mt-64 lg:ml-48 sm:pt-64 lg:pt-64">

                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 rounded shadow">Alarm</button>

                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 xs:ml-20 sm:ml-20 md:ml-32 lg:ml-40 rounded shadow">Unlock</button>

                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 xs:ml-20 sm:ml-20 md:ml-32 lg:ml-40 rounded shadow">Reset</button>

                </p>

            </>

        )

    }

}


const GoogleMap = GoogleApiWrapper({

    apiKey: 'xxx'

})(MapContainer)



export default GoogleMap;


查看完整回答
反對 回復 2022-11-11
  • 3 回答
  • 0 關注
  • 143 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號