Question

这是我在表格每行末尾渲染的组件。工具提示部分无效。

如何在渲染后将Bootstrap工具提示附加到每个组件？

(defn edit-button-component []
    (fn [attrs]
        ^{:component-did-mount #(.tooltip ($ %) (clj->js {:title "Test"}))}
        [:button.btn.btn-default attrs
        [:span.glyphicon.glyphicon-pencil]]))

Answer 1

符号$来自哪里？如果它来自jayq库那么它没关系。如果它是简单的javascript jQuery，那么你需要js/$。

与%关联的匿名函数的参数:component-did-mount通常被命名为this，它是一个React组件，而不是一个DOM对象。要获取等效的DOM节点以提供jQuery $选择器，请使用reagent.core/dom-node。类似的东西：

($ (reagent.core/dom-node %))

顺便说一下，(clj->js {:title "Test"})可以更好地写成#js {:title "Test"}

Answer 2

除了@myguidingstar关于访问js/$和DOM节点的说明外，您的元数据似乎不在正确的位置。它需要在函数上，而不是向量。

这是一个适合我的实现：

(def tooltip
  ^{:component-did-mount #(.tooltip (js/$ (reagent.core/dom-node %)))}
  (fn [message]
    [:img.help {:src "img/help.png", :data-placement "bottom", :title message}]))

还要确保在html文件中的app.js之前加载了jquery。

如何将Bootstrap工具提示附加到Clojurescript Reagent组件

2 个答案: