Mithril项目集成Mapbox GL JS时非"app"id容器无法渲染地图的问题

• 执行时序不匹配：Mapbox的实例初始化代码被写在模块顶层，这段逻辑会在模块被引入时立刻执行。此时Mithril还没有渲染组件生成id="map"的DOM节点，Mapbox自然无法找到目标容器，抛出Container 'map' not found错误。
• 之前用container: 'app'能正常渲染是场景巧合：你的入口HTML文件中硬编码了一个全局id="app"的div，这个节点在页面加载初期就存在于DOM中，刚好被初始化的Mapbox实例匹配到。这种实现不仅不符合组件化逻辑，还会因为组件内重复渲染同id的节点造成DOM结构冲突。

• 把Mapbox实例的初始化逻辑从模块顶层移到组件的oncreate生命周期钩子中：这个钩子会在组件内部所有DOM节点（包括id="map"的div）被挂载到页面后才触发，确保初始化时目标容器已经存在于DOM树中。
• 给id="map"的容器设置明确的宽高样式，避免地图初始化成功后因为容器默认尺寸为0，出现渲染空白的问题。
• 在组件的onremove钩子里调用地图实例的remove()方法释放资源，避免长期运行出现内存泄漏。

const m = require("mithril");
import mapboxgl from 'mapbox-gl';

// 仅配置Mapbox访问凭证，不提前创建地图实例
mapboxgl.accessToken = '你的Mapbox访问Token'

// 存储地图实例，方便后续交互调用
let map = null;

const Map = {
  // 组件DOM成功挂载到页面后触发
  oncreate: () => {
    map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-74.5, 40],
      zoom: 9
    })
  },
  // 组件从页面移除时触发，清理资源
  onremove: () => {
    if (map) {
      map.remove()
      map = null
    }
  },
  view: () => (
    <div>
      {/* 设置明确尺寸，为地图提供可渲染的空间 */}
      <div id="map" style="width: 100%; height: 500px;"></div>
    </div>
  )
}

export default Map

内容的提问来源于stack exchange，提问作者Daniel Patnode