Question

首先，为我的英语道歉。抱歉，如果我在语法上犯了错误。

我正在尝试使用react-map-gl添加标记，而我正在使用打字稿。

我设法静态添加了一个标记，但是我想动态添加多个标记。但是，当我尝试添加多个标记时，会显示出打字稿错误。

我不明白的是，当我静态添加它时，不会给我带来麻烦。

当我静态添加一个标记并且不显示任何打字稿错误时的示例：

<Marker
  draggable={true}
  longitude={-0.33942354}
  latitude={39.46181}
  onDrag={() => console.log("on drag")}
  onDragStart={() => console.log("drag start")}
  onDragEnd={() => console.log("drag end")}
>
  {theme === "dark" ? <FlowMiterDarkIcon /> : <FlowMiterLightIcon />}
</Marker>

添加多个标记

export class SettingsMap extends React.Component<
    Readonly<
        ISettingsMapProps & InteractiveMapProps & { children?: ReactNode }
    >,
    ISettingsMapState
> {
    mapRef: React.RefObject<InteractiveMap> = React.createRef<InteractiveMap>();
    timeout: ReturnType<typeof setTimeout> = setTimeout(() => "", 1000);

    constructor(
        props: Readonly<
            ISettingsMapProps & InteractiveMapProps & { children?: ReactNode }
        >
    ) {
        super(props);
        this.state = {
            viewport: {
                width: 100,
                height: 100,
                latitude: 39.46975,
                longitude: -0.37739,
                zoom: 14,
                pitch: 0,
            },
            mapGL: undefined,
        };
    }

    componentWillUnmount(): void {
        clearTimeout(this.timeout);
    }

    componentDidUpdate(prevProps: any): void {
        if (prevProps.showModal !== this.props.showModal) {
            const { viewport } = this.state;
            const updatedViewport: IViewport = Object.assign({}, viewport, {
                latitude: 39.46181,
                longitude: -0.33942354,
                zoom: 17,
            });
            this.timeout = setTimeout(() => {
                this.setState({ viewport: updatedViewport });
            }, 1000);
        }
    }

    handleLoad = (event: MapLoadEvent): void => {
        const loaded: boolean = event.target.loaded();
        const mapGL = this.mapRef.current;
        if (this.props.onSetLoaded) {
            this.props.onSetLoaded(loaded, mapGL);
        }
        if (mapGL !== null) {
            this.setState({ mapGL: mapGL });
        }
    };

    render() {
        const { theme, children, flowmeters, showModal } = this.props;
        const { width, height } = this.props;
        const { viewport } = this.state;
        const mapStyle: string = theme === "dark" ? darkTheme : lightTheme;
        return (
            <div className="dma-map__wrapper">
                <InteractiveMap
                    {...viewport}
                    ref={this.mapRef}
                    className="mapbox"
                    width={width}
                    height={height}
                    mapStyle={mapStyle}
                    preserveDrawingBuffer={true}
                    attributionControl={false}
                    mapboxApiAccessToken={MAPBOX_TOKEN}
                    onLoad={this.handleLoad}
                    onViewportChange={(viewport: ViewportProps) => {
                        viewport.width = 100;
                        viewport.height = 100;
                        this.setState({ viewport });
                    }}
                >
                    {!showModal && children}
                    {/* Example to try add multiple markers */}
                    {!showModal &&
                        flowmeters.map(
                            (flowmeter: IFlowMeter, index: number) => {
                                return (
                                    <FlowMeterMarker
                                        theme={theme}
                                        draggable={flowmeter.draggable}
                                        longitude={flowmeter.longitude}
                                        latitude={flowmeter.latitude}
                                    />
                                );
                            }
                        )}
                    {!showModal && <Layer {...pipeVectorLayer} />}
                </InteractiveMap>
            </div>
        );
    }
}

export default SettingsMap;

这是FlowMeterMarker：

import React, { useState } from "react";
import Marker, { DragEvent } from "react-map-gl";

import FlowMiterDarkIcon from "./Icons/FlowMiterDarkIcon";
import FlowMiterLightIcon from "./Icons/FlowMiterLightIcon";

import { IFlowMeterMarkerProps } from "./interfaces";

const FlowMeterMarker = ({
    theme,
    draggable,
    longitude,
    latitude,
}: IFlowMeterMarkerProps): JSX.Element => {
    const [currentLongitude, setLongitude] = useState(longitude);
    const [currentLatitude, setLatitude] = useState(latitude);
    const [events, setEvent] = useState({});

    const logDragEvent = (name: string, event: DragEvent) => {
        console.log("name: ", name);
        console.log("event: ", event);
        const updateEvents = { ...events, [name]: event.lngLat };
        setEvent(updateEvents);
    };

    const onMarkerDragStart = (event: DragEvent) => {
        logDragEvent("onDragStart", event);
    };

    const onMarkerDrag = (event: DragEvent) => {
        logDragEvent("onDrag", event);
    };

    const onMarkerDragEnd = (event: DragEvent) => {
        logDragEvent("onDragEnd", event);
        setLongitude(event.lngLat[0]);
        setLatitude(event.lngLat[1]);
    };

    return (
        <Marker
            longitude={currentLongitude}
            latitude={currentLatitude}
            draggable={draggable}
            onDrag={onMarkerDrag}
            onDragStart={onMarkerDragStart}
            onDragEnd={onMarkerDragEnd}
        >
            {theme === "dark" ? <FlowMiterDarkIcon /> : <FlowMiterLightIcon />}
        </Marker>
    );
};

export default FlowMeterMarker;

为什么下一次出现shome错误：

FlowMeterMarker / index.tsx（44,13）中的

TypeScript错误：没有重载匹配此调用。重载1（共2个，'（props：Readonly）：InteractiveMap'）产生以下错误。类型'{children：Element;经度：数字；纬度：数字； Draggable：布尔值； onDrag：（event：DragEvent）=>无效; onDragStart：（事件：DragEvent）=>无效; onDragEnd：（事件：DragEvent）=>无效; }”不能分配给“ IntrinsicAttributes＆IntrinsicClassAttributes＆Readonly＆Readonly <...>”类型。属性“可拖动”在类型“ IntrinsicAttributes和IntrinsicClassAttributes＆Readonly＆Readonly <...>”上不存在。 2（'props：InteractiveMapProps，上下文？：任意）：InteractiveMap'重载2，出现以下错误。类型'{children：Element;经度：数字；纬度：数字； Draggable：布尔值； onDrag：（event：DragEvent）=>无效; onDragStart：（事件：DragEvent）=>无效; onDragEnd：（事件：DragEvent）=>无效; }”不能分配给“ IntrinsicAttributes＆IntrinsicClassAttributes＆Readonly＆Readonly <...>”类型。属性“可拖动”在类型“ IntrinsicAttributes和IntrinsicClassAttributes＆Readonly＆Readonly <...>”上不存在。 TS2769

42 |             longitude={currentLongitude}
43 |             latitude={currentLatitude}

44 | draggable = {可拖动} | ^ 45 | onDrag = {onMarkerDrag} 46 | onDragStart = {onMarkerDragStart} 47 | onDragEnd = {onMarkerDragEnd}

我想也许是在想FlowMeterMarker是Map，但是。

为什么给我看那条消息？

如何使用打字稿

0 个答案: