反应引导模式中的地图框：找不到容器“地图”

Question

我正在尝试在反应响应模式中加载 mapbox-gl 组件并遇到生命周期问题。在 componentdidmount 事件期间，当我在页面内的生命周期之外加载地图而没有模态渲染时，这似乎工作正常，因为我正在加载它的 div 在正确的时间存在。但是，如果我创建一个将使用 componentdidmount 加载地图的组件，一旦模式打开，我就会收到错误“找不到容器‘地图’”。这是 componentdidmount 代码：

componentDidMount = () => {
  this.map = new mapboxgl.Map({
    attributionControl: false,
    container: 'map',
    style: mapDarkThemeStylesheet,
    center: this.props.map.center || DEFAULT_CENTER,
    zoom: this.props.map.zoomLevel || DEFAULT_ZOOM
  });
  this.map.addControl(new mapboxgl.NavigationControl({
    showZoom: true,
    showCompass: false,
    visualizePitch: false
  }), 'bottom-left');
}

如果此时 componentdidmount 已经发生，我需要在哪里创建地图并允许包含地图的 div 渲染时间？