5

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

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

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

2 回答 2

3

符号$来自哪里？如果它来自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"}

于 2014-11-28T05:34:27.307 回答
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。

于 2015-08-28T20:53:14.267 回答