1

我正在使用 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 处理程序未注册 ReactDOMServer.renderToString或React.js 服务器端渲染和事件处理程序）。

因此，我想找到另一种将我的 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 弹出窗口？

任何帮助表示赞赏。

4

1 回答 1

1

You can use your own DOM container to render elements:

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

I assume you need more than just one, but for the sake of brevity I'm having one.

(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)))))
于 2018-07-29T15:25:00.543 回答