Супер-выражение должно быть либо нулевым, либо функцией (пользовательский маркер)

Question

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

Я пытался следовать этому ответу , чтобы получить этофункциональность и импортировать расширенный маркер на мою карту.Но, увы, появляется следующая ошибка:

Super expression must either be null or a function
at _inherits (Marker.js:21)
at eval (Marker.js:30)
at eval (Marker.js?6e37:11)
at Module../src/utils/components/Marker.js (main.js:11547)

Это сильно беспокоит меня, в основном потому, что я не могу найти конкретный ответ относительно этой ошибки при расширении класса маркера.Вот моя расширенная реализация маркера (не может быть проще):

import { Marker } from 'react-leaflet';

class ExtendedMarker extends Marker {

  componentDidMount() {
    // Call the Marker class componentDidMount (to make sure everything behaves as normal)
    super.componentDidMount();

    // Access the marker element and open the popup.
    this.leafletElement.openPopup();
  }

}

export default ExtendedMarker;  

И вот где я ее импортирую:

import ExtendedMarker from '../../../utils/components/Marker';

...

createMarker = (key, lat, lng) => {
  const _lat = round(lat, this.DECIMAL_PLACES);
  const _lng = round(lng, this.DECIMAL_PLACES);
  return (
    <ExtendedMarker key={key} id={key} position={[_lat, _lng]}>
      <Popup className={`${styles.popup}`}>
        <Form>
          ...
        </Form>
      </Popup>
    </ExtendedMarker>
  )
}

Вот версии, которые я использую:

"react-leaflet": "^2.1.2",
"react": "^16.6.1"

Любые советы?

Спасибо, Гил

Answer 1

Поскольку Официальная документация React предлагает предпочесть композицию наследованию:

В Facebook мы используем React в тысячах компонентов, и мы не нашли ни одного случая использования, когдамы рекомендуем создать иерархии наследования компонентов.

Реквизиты и состав дают вам всю гибкость, необходимую для точной и безопасной настройки внешнего вида и поведения компонента.Помните, что компоненты могут принимать произвольные реквизиты, включая примитивные значения, элементы React или функции.

Я бы предложил следующий компонент маркера, который демонстрирует, как открыть всплывающее окно при создании маркера :

const ExtendedMarker = props => {

  const openPopup = marker => {
    if (marker) marker.leafletElement.openPopup();
  };

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

A функция обратного вызова используется для доступа к Leaflet Marker через marker.leafletElement

Вот демонстрация для справки