在 React 中使用 Mapbox 映射变量的正确类型是什么？

Question

看了一下mapbox documentation，就写了这个组件

import React from "react";
import mapboxgl from "mapbox-gl";
import "./Map.css";

mapboxgl.accessToken = "...";

type Props = {
  longitude: number;
  latitude: number;
};

class Map extends React.Component<Props> {
  private mapContainer: any;
  private map: any;

  componentDidMount(): void {
    this.map = new mapboxgl.Map({
      container: this.mapContainer,
      center: [this.props.longitude, this.props.latitude],
      style: "....",
      zoom: 13
    });
  }
  render(): JSX.Element {
    return (
      <div
        ref={(el): void => {
          this.mapContainer = el;
        }}
        className="mapContainer"
      />
    );
  }
}

export default Map;

此代码可以正常工作，但是，在我的实际项目中，我们使用的是 TypeScript。我不想将 any 用于 mapContainer 和 map。

我已经将 "@types/mapbox-gl": "^1.7.0", 导入到我的项目中，但我不知道我必须在这里使用什么类型。

到目前为止我的尝试：

private map:mapboxgl.Map。这似乎是正确的，但随后又抱怨了，因为它没有在构造函数上初始化。根据 mapbox 文档，它必须在 componentDidMount 上初始化。我可以用 mapboxgl.Map | null 键入变量。但后来我必须检查 constally 不为空，删除一些烦人的警告。
private mapContainer = React.userRef<HtmlElement>(null);。但是，当我尝试初始化地图时，它显示类型 'RefObject<HTMLElement>' is not assignable to type 'string | HTMLElement'.

有什么想法吗？

Answer 1

根据您的代码，可以执行以下操作。首先，您需要导入从 mapbox-gl:

导出的 Map 类型

import mapbox-gl, { Map } from "mapbox-gl";

稍后可以用作组件内地图的类型：

private map: Map | undefined; // | undefined is needed here otherwise Typescript will complain about a missing initialiser inside the constructor.

现在是棘手的部分，容器定义为：

container: string | HTMLElement

在 MapboxOptions 类型定义中。因此我们必须稍微解决一下：

class SampleMap extends React.Component<Props> {
  private mapContainer: HTMLElement | null | undefined = undefined;
  private map: Map | undefined;

  componentDidMount(): void {
    this.map = new mapboxgl.Map({
      container:
        this.mapContainer === undefined || this.mapContainer === null
          ? "" // or pass in some other HTMLElement which is definitely defined or similar ...
          : this.mapContainer,
      ... // abbreviated
    });
  }
  render(): JSX.Element {
    ... // abbreviated
  }
}

检查 mapContainer 是否已定义且不为 null 并传入 mapContainer 否则 string 或者您可以传入其他 HTMLElement你知道是 100% 定义的。例如。 document#root.

完整的代码可以在这里找到：on CodeSandbox

在 React 中使用 Mapbox 映射变量的正确类型是什么？

What are the correct types to map variables using Mapbox in React?

mapbox

typescript

reactjs

mapbox-gl