react-leaflet-rotatedmarkers: TypeError: супервыражение должно быть либо нулевым, либо функцией, а не объектом

как вы можете видеть в теме, моя проблема заключается в том, что когда я хочу импортировать реагирующий листовой маркер, только импортируя, мое реагирующее веб-приложение выдает мне это сообщение.

Я использую реактивную листовку v2.1.2.

Вот фрагмент моего js-кода:

import React, { Component } from 'react';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import L, { map, addTo } from 'leaflet';
import RotatedMarker from 'react-leaflet-rotatedmarker'
import './App.css'

//importing marker/icon
var ego_veh_icon = L.icon({
    iconUrl: require('./design/icons/ego_veh_arrow.svg'),
    iconSize: [150, 200],
    iconAnchor: [82.5, 40],
    popupAnchor: [0, -25],
});

var av_veh_icon = L.icon({
    iconUrl: require('./design/icons/autonom_veh_arrow.svg'),
    iconSize: [150, 200],
    iconAnchor: [82.5,55],
    popupAnchor: [-5, -25],
});

var nav_veh_icon = L.icon({
    iconUrl: require('./design/icons/non_autonom_veh_arrow.svg'),
    iconSize: [150, 200],
    iconAnchor: [82.5, 60],
    popupAnchor: [-10, -25],
});

class Map_hmi extends Component {
    constructor() {
        super();
        this.state = {
            markers: [[x, y]],
            param: null,
        };
    }

    // ego veh position 
    ego_veh = {
        lat: x,
        lng: y,
    }

     // nav veh position 
     nav_veh = {
        lat: x,
        lng: y,
    }

     // av veh1 position 
     av_veh1 = {
        lat: x,
        lng: y,
    }

    // av veh2 position 
    av_veh2 = {
        lat: x
        lng: y,
    }

    render() {
        
        const ego_veh_pos = [this.ego_veh.lat, this.ego_veh.lng]
        const nav_veh_pos = [this.nav_veh.lat, this.nav_veh.lng]
        const av_veh1_pos = [this.av_veh1.lat, this.av_veh1.lng]
        const av_veh2_pos = [this.av_veh2.lat, this.av_veh2.lng]
        return (
            // declaring the map
            <Map
                className="map"
                center={ego_veh_pos}
                zoom={15}
                zoomControl={false}
            >
                <TileLayer
                    attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />  
                    {/* <RotatedMarker position={position} rotationAngle={180} rotationOrigin={'center'} /> */}
                    {/* ego veh */}
                    <Marker 
                        position={ego_veh_pos}
                        icon= {ego_veh_icon}>
                        <Popup>
                        EGO <br/>
                        </Popup>
                    </Marker>
                    {/* nav veh */}
                    <Marker 
                        position={nav_veh_pos}
                        icon= {nav_veh_icon}>
                        <Popup>
                        NAV <br/>
                        </Popup>
                    </Marker>
                    {/* av veh1 */}
                    <Marker 
                        position={av_veh1_pos}
                        icon= {av_veh_icon}>
                        <Popup>
                        AV <br/>
                        </Popup>
                    </Marker>
                     {/* av veh2 */}
                     <Marker 
                        position={av_veh2_pos}
                        icon= {av_veh_icon}>
                        <Popup>
                        AV <br/>
                        </Popup>
                    </Marker>
                )}
            </Map>
            
        );
    }
}

export default Map_hmi;

Итак, мой код отлично работает без импорта, но как только я его импортирую:

TypeError: супервыражение должно быть либо нулевым, либо функцией, а не объектом

Я только хочу повернуть значок ....

Любая помощь?

Привет


person KurgerBing    schedule 14.12.2018    source источник
comment
Вы пытались удалить точку с запятой после super().   -  person Vikas Singh    schedule 14.12.2018
comment
да тоже не работает   -  person KurgerBing    schedule 14.12.2018
comment
Определите состояние так же, как ego_veh вне конструктора, и полностью удалите конструктор.   -  person Zydnar    schedule 14.12.2018
comment
Вы уверены, что эта ошибка возникает для этого super, а не где-то еще?   -  person Zydnar    schedule 14.12.2018
comment
хорошо, это другое решение. это была версия реактивной листовки. сейчас у меня 1.7.8. возможно, это полезно и для других людей. v2 и выше не работает. но всем спасибо!   -  person KurgerBing    schedule 14.12.2018


Ответы (2)


Предоставленный другой ответ кажется правильным, react-leaflet-rotatedmarkerpackage не совместим с react-leaflet v2package.

Для библиотеки react-leaflet v2 компонент RotatedMarker может быть реализован следующим образом (предлагает то же поведение, что и пакет react-leaflet-rotatedmarker):

import React, { Component } from "react";
import { withLeaflet } from "react-leaflet";
import { Marker } from "react-leaflet";
import { Marker as LeafletMarker } from 'leaflet-rotatedmarker';

const RotatedMarker = props => {
  const setupMarker = marker => {
    if (marker) {
      if (props.rotationAngle)
        marker.leafletElement.setRotationAngle(props.rotationAngle);
      marker.leafletElement.setRotationOrigin(props.rotationOrigin);
    }
  };

  return <Marker ref={el => setupMarker(el)} {...props} />;
};

RotatedMarker.defaultProps = {
  rotationOrigin: "center"
};

export default withLeaflet(RotatedMarker);

Демонстрационная страница

person Vadim Gremyachev    schedule 17.12.2018

tldr: использование кода в этом комментарии должно решить вашу проблему. https://github.com/verdie-g/react-leaflet-rotatedmarker/issues/1#issuecomment-427285940

Более длинный ответ: react-leaflet v2 имеет очень серьезное критическое изменение по сравнению с v1 в том, как выполняются расширения компонентов. Если вы посмотрите на код для react-leaflet-rotatedmarker, вы увидите эту строку: https://github.com/verdie-g/react-leaflet-rotatedmarker/blob/master/src/RotatedMarker.jsx#L5

Это расширение класса Marker не работает в версии 2 и вызывает эту ошибку. Для получения дополнительной информации о том, почему это так, вы можете проверить проблему, которую я поднял в репозитории react-leaflet. https://github.com/PaulLeCam/react-leaflet/issues/506

person jbccollins    schedule 14.12.2018