Leaflet Popup 中的试剂组件 - 自定义 Leaflet Popup答案

【问题标题】：Reagent component in Leaflet Popup - Customize Leaflet PopupLeaflet Popup 中的试剂组件 - 自定义 Leaflet Popup
【发布时间】：2019-01-05 22:45:19
【问题描述】：

我正在构建一个带有 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 写成字符串。我想用打嗝语法编写弹出窗口的内容，然后以某种方式将其传递给“.bindPopup”。我想这样做，因为单击时将包含一些 Clojurescript，如果我只是将 HTML 内联写为字符串，我无法将其放入其中。例如，我尝试过：
(.bindPopup (reagent.dom.server/render-to-string [:div "Hello World"]))
这也可以正常工作，但是我在那里的任何点击都会在翻译中丢失。我知道这种方式行不通（参见onClick handler not registering with ReactDOMServer.renderToString 或React.js Serverside rendering and Event Handlers）。

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

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

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

TLDR：如何将 Reagent 组件呈现为 HTML 元素，包括其点击功能，以便我可以将其移交给 Leaflet 弹出窗口？

任何帮助表示赞赏。

【问题讨论】：

标签： javascript leaflet clojurescript reagent re-frame

【解决方案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)))))

【讨论】：