reactjs - 在 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); .但是，当我尝试初始化 map 时，它显示类型 'RefObject<HTMLElement>' is not assignable to type 'string | HTMLElement'.

有什么想法吗？

Answer 1

根据您的代码，以下工作。首先，您需要导入从 mapbox-gl 导出的 Map 类型:

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

稍后可以用作组件内 map 的类型:

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 或者您可以传入一些other HTMLElement 你知道它是 100% 定义的。例如。 document#root.

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