Question

我正在使用react-leaflet，clojurescript和hx在网页上绘制地图。但是只是部分加载。我在一个名称空间中创建组件，但在另一个名称空间中调用它。我还尝试仅在初始化后才挂载地图。

;; In the map name space

(hx/defnc draw-map [props]
(let [!ref (react/useRef nil)
    [!map-view map-view-update-fn] (react/useState nil)]

(hooks/useEffect
 (fn []
   (when-not !map-view (let [m (-> js/L
                                 (.map !ref.current)
                                 (.setView #js [-26.718 30.384] 8))
                             tile1 (-> js/L
                                     (.tileLayer tile-layer-url
                                       #js{:maxZoom     13
                                           :attribution "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors"}))])

             geo-json-data (-> js/L (.geoJSON (clj->js data/geojson))))

   (.addTo tile1 m)
   (.addTo geo-json-data m)
   (.bindPopup geo-json-data get-loc-name)
   (.invalidateSize m)
   (.setView m #js[-26.718 30.384] 8)
   (fn create-map-cleanup []
     (.remove m)))
 [!ref])
[:div {:ref !ref} "Map loading ..."]))

在一个单独的命名空间中，我创建了一个用于渲染地图的新hx组件。

(hx/defnc map-view [props]
   [map/draw-map])

Answer 1

在我添加的索引文件中添加react-leaflet样式表：

let title = getTitle()
let selector = getSelector()

await page.evaluate(
  ({selector, title}) => {
    let el = document.querySelector(selector)
    if ('value' in el) el.value = title
    else el.innerText = title
  },
  {selector, title}
)

Clojurescipt代码中的React-leaflet地图局部加载

1 个答案: