在试剂组分之间传递数据

Question

我有以下试剂成分

(defn comments-component [arg-id]
  [:p arg-id])

(defn arguments-component [list-of-args]
  [:ul.arguments
   (for [{:keys [comment upvotes id]} @list-of-args]
     ^{:key id}
     [:li
      [:p comment]
      [:p upvotes]
      [:p id
       [modal-button :argument
       ;title
        "Comments"
       ;body
        [:div
         [:p "Comments"]
         [comments-component id]]
        ;footer
       [:p "OpinionNeeded"] ]]])])
        

(defn debate []
  (let [debate-topic @(rf/subscribe [:debate/topic])
        debate-affirmatives (rf/subscribe [:debate/affirmatives])
        debate-negatives (rf/subscribe [:debate/negatives])]
    (fn []
      [:div
       [:a {:href "/"} "Return home"]
       [:p "This page is being worked on"]
       [:div
        [:h2 (get debate-topic :title)]
        [:p (get debate-topic :description)]]
       [:div.columns
        [:div.column.is-half
         [:p "Agree"]
         [arguments-component debate-affirmatives]]
        [:div.column.is-half
         [:p "Disagree"]
         [arguments-component debate-negatives]]]])))

我遇到的问题是模式按钮应该为每个特定参数创建一个带有 id 的模式弹出窗口，（然后我可以使用它来获取该特定参数的评论。）

但相反，我遇到了这个错误，即不同参数的所有模态都显示相同的 ID。

我不明白为什么会这样，但似乎所有 modal-button 函数都使用要呈现的最后一个或第一个参数的 ID 调用。

这是此页面上 app-db 的相关部分的样子

:affirmatives [{:id 1, :comment "", :upvotes 0, :topic_id 2, :affirm true} {...}]
:negatives [{:id 2, :comment "", :upvotes 0, :topic_id 2, :affirm true} {...}]
:comments [{:id 1, :comment "", :upvotes 0, :argument_id 1, :topic_id 2} {...}]

每个评论中的 :argument_id 是对 affirmatives/negatives

中的 :id 的引用

这是生成模态的代码。

(rf/reg-event-db
 :app/show-modal
 (fn [db [_ modal-id]]
  (assoc-in db [:app/active-modals modal-id] true)))

(rf/reg-event-db
 :app/hide-modal
 (fn [db [_ modal-id]]
  (update db :app/active-modals dissoc modal-id)))

(rf/reg-sub
 :app/active-modals
 (fn [db _]
  (:app/active-modals db {})))

(rf/reg-sub
 :app/modal-showing?
 :<- [:app/active-modals]
 (fn [modals [_ modal-id]]
  (get modals modal-id false)))

(defn modal-card [id title body footer]
 [:div.modal
  {:class (when @(rf/subscribe [:app/modal-showing? id]) "is-active")}
  [:div.modal-background
   {:on-click #(rf/dispatch [:app/hide-modal id])}]
  [:div.modal-card
   [:header.modal-card-head
    [:p.modal-card-title title]
    [:button.delete
     {:on-click #(rf/dispatch [:app/hide-modal id])}]]
   [:section.modal-card-body
    body]
   [:footer.modal-card-foot
    footer]]])

(defn modal-button [id title body footer]
 [:div
  [:button.button.is-primary
   {:on-click #(rf/dispatch [:app/show-modal id])}
   title]
  [modal-card id title body footer]])

Answer 1

您的所有模态都传递了相同的 ID :argument。因此，您总是显示相同的模式，因为您订阅中的数据库查找是针对 :argument.

一个小提示：遵循kebap-case是Clojure推荐的风格。所以你的 app-db 属性应该是 argument-id 和 topic-id.

此外，我建议在您传递给它们的组件中订阅 debate-affirmatives 和 debate-negatives。这将使他们更加自给自足。

在试剂组分之间传递数据

Passing data between reagent components

clojurescript

bulma

reagent

re-frame