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

在查看之后，我编写了这个组件

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;

从“React”导入React；
从“mapbox gl”导入mapboxgl；
导入“/Map.css”；
mapboxgl.accessToken=“…”；
类型道具={
经度：数字；
纬度：数字；
};
类映射扩展了React.Component{
私有映射容器：任意；
私人地图：任何；
componentDidMount（）：void{
this.map=new mapboxgl.map({
容器：this.mapContainer，
中心：[this.props.longitude，this.props.lation]，
风格：“…”，
缩放：13
});
}
render（）：JSX.Element{
返回(
{
this.mapContainer=el；
}}
className=“mapContainer”
/>
);
}
}
导出默认地图；

这段代码工作正常，但是，在我的实际项目中，我们使用的是TypeScript。我不想对

mapContainer

和

map

使用

any

我已将

“@types/mapbox gl”：“^1.7.0”

导入到我的项目中，但我无法确定我必须在此处使用什么类型

我迄今为止的努力：

• 私有地图：mapboxgl.map

  。它似乎是正确的，但这是因为它没有在构造函数上初始化。根据mapbox文档，它必须在

  componentDidMount

  上初始化。我可以使用

  mapboxgl.Map | null

  键入变量。但我必须检查constally是否为null，以删除 一些恼人的警告

• private-mapContainer=React.userRef（null）。但是，当我尝试初始化映射时，它会说Type
  'reObject'不能分配给Type'string | HTMLElement.

---

有什么想法吗？

根据您的代码，下面的方法很有效。首先，您需要导入从

mapbox gl

导出的

Map

类型：

导入mapbox gl，从“mapbox gl”导入{Map}；

稍后可将其用作组件内部映射的类型：

私有映射：映射|未定义；/|此处需要undefined，否则Typescript将抱怨构造函数中缺少初始化器。

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

container:string | HTMLElement

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

类SampleMap扩展React.Component{
私有映射容器：HTMLElement | null | undefined=未定义；
私有映射：映射|未定义；
componentDidMount（）：void{
this.map=new mapboxgl.map({
容器：
this.mapContainer==未定义| | this.mapContainer===空
？“”//或传入其他明确定义或类似的HTMLElement。。。
：this.mapContainer，
…//缩写
});
}
render（）：JSX.Element{
…//缩写
}
}

检查

mapContainer

是否已定义且不为null，然后在

mapContainer

中传递，否则将传递

字符串

，或者您可以传递您知道已100%定义的其他

HTMLElement

。例如，

文档#根

---

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

对于

this.map

使用：

this.map:map

，从“@types/mapbox gl”导入

import{map}对于mapContainer，您可以尝试使用
HtmlElement
而不是
HtmlElement
HtmlElement
似乎是正确的，但是当我尝试初始化地图时，它会抱怨。谢谢你的帮助。它按预期工作。但我有点担心。在
componentDidMount
映射中，它被初始化。但是，在
componentdiddupdate
中使用
this.map
会显示投诉，因为
可能未定义。要删除警告，我必须选中
this.map！==未定义
。但这应该不是必需的，因为
componentdiddupdate
总是在didMount之后执行。