javascript - ClojureScript 试剂父组件不会将光标传递给子组件

Question

我正在尝试创建一个简单的动态 svg。一种 View 框设置随着窗口尺寸的变化而更新的地方。
为此，我定义了一个顶级组件，如下所示

(defn windowdim_comp
 []
 (with-let [wndcomp_state (atom {:text "Parent2Component"})
         resize_handler #(swap! wndcomp_state assoc
                         :height (.-innerHeight js/window)
                         :width (.-innerWidth js/window))
         mousemove_handler #(swap! wndcomp_state assoc
                                   :x (.-pageX %)
                                   :y (.-pageY %))
         _ (.addEventListener js/window "resize" resize_handler)
         _ (.addEventListener js/document "mousemove" mousemove_handler)
         _ (swap! wndcomp_state assoc :height (.-innerHeight js/window))
         _ (swap! wndcomp_state assoc :width (.-innerWidth js/window))]
[:div
 [:p "width : " (:width @wndcomp_state) " height : " (:height @wndcomp_state)]
 [:p "x : " (:x @wndcomp_state) " y : " (:y @wndcomp_state)]
 (svgrender (cursor wndcomp_state [:text :width :height]))
 ]
(finally
  (.removeEventListener js/window "resize" resize_handler)
  (.removeEventListener js/document "mousemove" mousemove_handler))))

该组件然后调用一个名为 svgrender 的子组件，其光标仅采用 :text :width & :height 值...定义如下:

(defn svgrender
 [parent_state]
  (with-let [svgstate (atom {:clicked false})
           mousedown_handler #(swap! svgstate assoc
                                     :clicked true)
           mouseup_handler #(swap! svgstate assoc
                                   :clicked false)]
    [:svg {:viewBox "0 0 500 500"
         :width 500
         :height 500
         :id "svgcontainer"
         :onMouseDown mousedown_handler
         :onMouseUp mouseup_handler}
      [:g {:id "layer1"}
       [:rect {:id "rect1"
            :width 500
            :height 500
            :x 0
            :y 0
            :style {:fill (if (:clicked @svgstate)
                            "#ff00ff"
                            "#00ffff")}}]
         [:text {:x 5
            :y 15
            :class "small"}
          (gstring/format "width : %s height : %s" (:width @parent_state) (:height @parent_state))]
         [:text {:x 5
            :y 35
            :class "small"}
          (gstring/format "Click status : %s" (:clicked @svgstate))]
         [:text {:x 5
            :y 55
            :class "small"}
          "Parent Text:  " (:text @parent_state)]]]
        (finally
          (.removeEventListener (.getElementById js/document "svgcontainer")
                          "onmousedown" mousedown_handler)
          (.removeEventListener (.getElementById js/document "svgcontainer")
                          "onmouseup" mouseup_handler))))

问题是无论我做什么，我都无法从 parent_state 中获取值以显示在子节点中......它们只是显示为空值

请有人可以帮助我吗？我不知道我做错了什么!!
更新:
根据沃尔顿的建议，我想出了一些变化

Parens 调用具有完整父状态的组件
(svgrender wndcomp_state)

结果:失败

Parens 调用带有光标的组件，就像在原始代码中一样
(svgrender (光标 wndcomp_state [:text :width :height]))

结果:失败

根据 Walton 的建议，Parens 调用带有轨道的组件
(svgrender (track #(select-keys @wndcomp_state [:text :width :height])))

结果:通过!!

对具有完整父状态的组件的方形调用已通过
[svgrender wndcomp_state]

结果:通过!!

像原始代码一样使用光标对组件进行方形调用
[svgrender (光标 wndcomp_state [:text :width :height])]

结果:失败

根据 Walton 的建议，对带有轨道的组件进行方形调用
[svgrender (track #(select-keys @wndcomp_state [:text :width :height]))]

结果:通过!!
现在这太奇怪了......不是吗？虽然我接受沃尔顿的回答，但谁能解释为什么会这样？

Answer 1

cursor表现得像 get-in ，而上面的代码期望它的行为类似于 select-keys .虽然您可以通过将函数作为第一个参数传入(参见文档中的第二个示例)来使游标表现得像您想要的那样，但您不需要编写游标，因此最好使用 track .类似 (track #(select-keys @wndcomp_state [:text :width :height])) (未经测试)
也就是说，在您的示例中，即使跟踪也是矫枉过正，您确实不需要新的 react 。您可以将原始原子传递给子组件，一切都会完美无缺。这样做的缺点是，如果您的示例被简化并且您有其他属性比 :width 更频繁地更改和 :height每次更改时，您都必须重新渲染 child 。
然而，即使这个问题也可以在没有新 react 的情况下解决。只需传入普通 map 即可。所以，而不是 [svgrender (track #(select-keys @wndcomp_state [:text :width :height]))]您只需 [svgrender (select-keys @wndcomp_state [:text :width :height])] (注意:我也使用方括号而不是括号，参见 here )。当 wndcomp_state 时使用这种方法更改 windowdim_comp组件将被重新渲染，这会导致它调用 svgrender具有来自 wndcomp_state 的文本、宽度和高度的组件.如果这些改变了，就像用新的 props 调用一个 React 组件，它会被重新渲染。如果他们没有您的电话 svgrender与最初呈现的参数相同。在那种情况下，试剂不会重新渲染它(使用方括号。使用括号，它总是会被重新渲染)。
效果相同，但对 Reagent/React 跟踪依赖项的工作较少。