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

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}/>
  );
};

Функция обратного вызова используется для доступа Leaflet Marker с помощью marker.leafletElement

Вот демо для вашей справки