Reactjs 如何在react中实现基本的mapbox gl

您好，我在mapbox中使用了代码示例，但它没有显示任何内容（宽度=0）。请指导我如何在react js中实现映射。这是我的index.js文件：

mapboxgl.accessToken =
  "My token";

class Application extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lng: 5,
      lat: 34,
      zoom: 2
    };
  }

  componentDidMount() {
    const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: "mapbox://styles/mapbox/streets-v11",
      center: [this.state.lng, this.state.lat],
      zoom: this.state.zoom
    });

    map.on("move", () => {
      this.setState({
        lng: map.getCenter().lng.toFixed(4),
        lat: map.getCenter().lat.toFixed(4),
        zoom: map.getZoom().toFixed(2)
      });
    });
  }

---

必须为地图框控件指定宽度和高度。以下是如何让它工作：

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

mapboxgl.accessToken =
  "<token>";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lng: 5,
      lat: 34,
      zoom: 2
    };
  }

  componentDidMount() {
    const map = new mapboxgl.Map({
      container: "map",
      style: "mapbox://styles/mapbox/streets-v11",
      center: [this.state.lng, this.state.lat],
      zoom: this.state.zoom
    });

    map.on("move", () => {
      this.setState({
        lng: map.getCenter().lng.toFixed(4),
        lat: map.getCenter().lat.toFixed(4),
        zoom: map.getZoom().toFixed(2)
      });
    });
  }

  render() {
    return (
      <div
        id="map"
        style={{
          width: "100vw",
          height: "100vh"
        }}
      />
    );
  }
}

从“React”导入React；
导入“/styles.css”；
从“mapbox gl”导入mapboxgl；
mapboxgl.accessToken=
"";
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
液化天然气：5，
拉脱维亚：34，
缩放：2
};
}
componentDidMount（）{
常量映射=新的mapboxgl.map({
容器：“地图”，
样式：“mapbox://styles/mapbox/streets-v11",
中心：[this.state.lng，this.state.lat]，
缩放：this.state.zoom
});
map.on（“移动”，（）=>{
这是我的国家({
lng:map.getCenter（）.lng.toFixed（4），
lat:map.getCenter（）.lat.toFixed（4），
缩放：map.getZoom（）.toFixed（2）
});
});
}
render（）{
返回(
);
}
}

谢谢Raj，但它仍然是空的，它给出了style.css的错误，所以我添加了我的App.css地址。你能帮我更多吗？@RachelMS看看这个代码沙盒：你是我的英雄