弹出式传单中的试剂成分-自定义传单弹出式

Question

我正在用重新框架和试剂构建一个Clojurescript前端。目前，前端只包含一张地图，该地图是使用传单创建的。在地图上单击一个新的标记设置为该位置。单击任何这些标记时，都会显示弹出。

到目前一切尚好。现在的问题是，我想准确地调整这个传单弹出，以也包含一个删除按钮，然后应该用来删除标记再次。这里是我遇到麻烦的地方。代码如下所示(归结为最小)：

(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"]))

这也很好，但是我输入的任何点击都是在翻译中丢失的。我知道这不是这样的(请参阅onClick handler not registering with ReactDOMServer.renderToString或React.js Serverside rendering and Event Handlers)。

因此，我希望找到另一种方法将我的Reagent (它只是包装React)组件传递给传单，以便它满足弹出窗口的接口：

setContent(<String|HTMLElement|Function> htmlContent) (https://leafletjs.com/reference-1.3.2.html#popup-setcontent)

因此，基本上，我希望将组件呈现到一个HTMLElement中，而不是直接呈现到虚拟DOM中。我想调用试剂呈现函数，不将结果呈现到应用程序中，但将其作为一个HTMLElement返回，我可以将其传递给传单。

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

TLDR:如何将一个Reagent组件呈现到一个HTMLelement中，包括它的on-click函数，这样我就可以将它交给传单弹出？。

任何帮助都很感激。

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)))))