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

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

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

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"

Какие-нибудь советы?

Спасибо, Гил


reactjs javascript react-leaflet
person gilneto8    schedule 20.11.2018    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Поскольку официальная документация 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

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

person Vadim Gremyachev    schedule 25.11.2018
comment
Это имело смысл, я смотрел на это с другой точки зрения. Это сработало, спасибо вам большое. - person gilneto8; 26.11.2018
comment
Это отличный ответ, поскольку он указывает вам правильное направление. Однако это не объясняет, почему вы получаете эту ошибку. Эта ошибка возникает из-за того, что автор react-leaflet опубликовал v2 своей библиотеки и полностью изменил способ работы расширяемых компонентов для большинства компонентов. Чтобы узнать, почему именно вы получаете эту ошибку, ознакомьтесь с этой проблемой github: github .com / PaulLeCam / react-leaflet / issues / 506 - person jbccollins; 26.11.2018