Question

我正在创建一个应用程序，用户只需单击地图本身，即可在其中添加标记到地图上的特定位置。为此，我正在使用react-leaflet来生成地图及其功能。效果很好，但是我希望在创建时打开与标记关联的弹出窗口，而我似乎无法实现。

我尝试遵循this answer来获得此功能，并将扩展标记导入到我的地图中。但可惜的是，出现以下错误：

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 official documentation建议优先于继承而不是继承：

在Facebook，我们在成千上万的组件中使用React，但我们尚未   发现了建议使用组件的任何用例   继承层次结构。

道具和构图为您提供了所需的所有灵活性   以明确且安全的方式自定义组件的外观和行为。   请记住，组件可以接受任意道具，包括   基本值，React元素或函数。

我建议使用以下标记组件，以演示如何在标记创建时打开弹出窗口：

const ExtendedMarker = props => {

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

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

使用callback function通过Leaflet Marker来访问marker.leafletElement

Here is a demo供参考

超级表达式必须为null或函数（自定义标记）

1 个答案: