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

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 用于通过marker.leafletElement 访问Leaflet Marker

Here is a demo供您参考