ClojureScript/Hiccup内联CSS实现hover触发元素显示隐藏问题

现有代码的问题 #

1. 订阅代码存在语法错误，缺少闭合括号与默认值；
2. 仅处理了鼠标悬停事件，未添加鼠标移出后的恢复逻辑；
3. 未设置初始状态的display默认值，可能导致"world"初始显示异常。

修正后的完整代码 #

订阅文件（修复语法+添加默认值）

(rf/reg-sub 
  ::hover-feedback 
  (fn [db] 
    (get-in db [:hover-feedback] "block")) ; 默认设为block，保证初始状态下文本显示

事件文件（补充鼠标移出的恢复事件）

; 鼠标悬停时设置display为none
(rf/reg-event-db
  ::hover-hide-text
  (fn [db]
    (assoc db :hover-feedback "none")))

; 鼠标移出时恢复display为block
(rf/reg-event-db
  ::hover-show-text
  (fn [db]
    (assoc db :hover-feedback "block")))

组件代码（绑定两个鼠标事件）

[:p {:onMouseOver #(rf/dispatch [::events/hover-hide-text])
     :onMouseOut  #(rf/dispatch [::events/hover-show-text])} "hello"]
[:p {:style {:display @(rf/subscribe [::subs/hover-feedback])}} "world"]

简化方案（单事件传参） #

如果想减少事件数量，可以用单个事件接收display参数：

事件文件

(rf/reg-event-db
  ::toggle-display
  (fn [db [_ display-value]]
    (assoc db :hover-feedback display-value)))

组件代码

[:p {:onMouseOver #(rf/dispatch [::events/toggle-display "none"])
     :onMouseOut  #(rf/dispatch [::events/toggle-display "block"])} "hello"]
[:p {:style {:display @(rf/subscribe [::subs/hover-feedback])}} "world"]

说明 #

re-frame通过全局状态管理控制UI，无需依赖this.value。只要订阅的状态更新，组件会自动重新渲染，内联CSS的display属性也会同步变化。

内容的提问来源于stack exchange，提问作者niloofar