如何将引导工具提示附加到 Clojurescript 试剂组件答案

【问题标题】：How to attach Bootstrap tooltip to Clojurescript Reagent component如何将引导工具提示附加到 Clojurescript 试剂组件
【发布时间】：2014-11-27 04:40:43
【问题描述】：

这是我在表格每一行末尾渲染的组件。工具提示部分不起作用。

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

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

【问题讨论】：

控制台有错误吗？您是否尝试在函数中进行 prn 以确保 component-did-mount 触发？

标签： twitter-bootstrap clojurescript reagent

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

【讨论】：

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

【讨论】：