Leaflet Popup 中的 Reagent component - 自定义 Leaflet Popup

Question

我正在使用 Re-Frame 和 Reagent 构建一个 Clojurescript 前端。目前，前端仅包含使用 Leaflet 创建的地图。单击地图时，一个新标记将设置到该位置。单击这些标记中的任何一个时，都会显示一个弹出窗口。

到目前为止一切顺利。现在的问题是，我想准确地调整这个 Leaflet 弹出窗口，使其也包含一个删除按钮，然后应该使用该按钮再次删除标记。这是我遇到问题的地方。代码如下所示（归结为最小值）：

(setup-map!
    (-> js/L
        (.map "mapid")
        (.setView #js [12.34 56.78] 10))]
        (.on map "click" add-marker-to-map! (aget % "latlng" "lat") (aget % 
        "latlng" "lng"))))  

(defn add-marker-to-map!
    [lat long map-object]
    (-> js/L
        (.marker #js [lat long])
        (.addTo map-object)
        (.bindPopup "<div>Hello World!</div>")

这也行。但我不想将内联 HTML 写成字符串。我想用 hiccup 语法编写弹出窗口的内容，然后以某种方式将其传递给“.bindPopup”。我想这样做，因为单击将包含一些 Clojurescript，如果我只是将 HTML 内联写为字符串，我不能将其放入其中。例如，我尝试使用：
(.bindPopup (reagent.dom.server/render-to-string [:div "Hello World"]))
这也可以正常工作，但是我放在那里的任何点击都会在翻译中丢失。我知道这种方式行不通（请参阅 or ）。

因此我想找到另一种方法将我的 Reagent（只是包装 React）组件传递给 Leaflet，以便它满足弹出的界面：
setContent(<String|HTMLElement|Function> htmlContent) (https://leafletjs.com/reference-1.3.2.html#popup-setcontent)

所以基本上我想将组件渲染到 HTML 元素中而不是直接渲染到虚拟 DOM 中。我想调用试剂渲染函数并且不将结果渲染到应用程序中，而是将其作为我可以传递给 Leaflet 的 HTML 元素返回。

 (reagent/render [hello] (.getElementById js/document "app"))

TLDR：如何将 Reagent 组件渲染到 HTML 元素中，包括其点击功能，以便我可以将其交给 Leaflet 弹出窗口？

感谢任何帮助。

Answer 1

您可以使用自己的 DOM 容器来渲染元素：

(def custom-parent (atom (dom/createDom "div")))

我假设你需要的不只是一个，但为了简洁起见，我有一个。

(defn add-marker-to-map!
    [evt]
    (let [evt (js->clj evt :keywordize-keys true)
          {{:keys [lat lng]} :latlng} evt]
        (-> js/L
            (.marker #js [lat lng])
            (.addTo m)
            (.bindPopup (r/render [:div "Marker here"
                                   [:br]
                                   [:button {:on-click (fn [] (js/console.log "clicked"))} "delete me"]]
                                  @custom-parent)))))

Leaflet Popup 中的 Reagent component - 自定义 Leaflet Popup

Reagent component in Leaflet Popup - Customize Leaflet Popup

javascript

leaflet

clojurescript

reagent

re-frame