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

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获取值来显示在子节点中......它们只是显示为空

请问有人可以帮助我吗？我不知道我做错了什么!!

更新: 根据沃尔顿的建议，我想出了一些变化

1. Parens 对已传递完整父状态的组件的调用

   (svgrender wndcomp_state)

结果:失败

像原始代码一样使用光标对组件进行括号调用

(svgrender(光标wndcomp_state [:文本:宽度:高度]))

结果:失败

根据 Walton 的建议，Parens 调用带轨道的组件

(svgrender (track #(select-keys @wndcomp_state [:text :width :height])))

结果:通过!!

对已传递完整父状态的组件进行方形调用

[svgrender wndcomp_state]

结果:通过!!

像原始代码一样使用光标方形调用组件

[svgrender(光标wndcomp_state [:文本:宽度:高度])]

结果:失败

按照 Walton 的建议，对带轨道的组件进行方形调用

[svgrender (轨道 #(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 更频繁更改的属性，那么您每次都必须重新渲染子项这些都改变了。

即使这个问题也可以在没有新 react 的情况下得到解决。只需传递普通 map 即可。因此，您只需拥有 [svgrender (select-keys @wndcomp_state [:text :text : width :height])] (注意:我还使用方括号而不是括号，请参阅 here )。使用此方法，当 wndcomp_state 更改时，windowdim_comp 组件将重新渲染，这会导致它使用文本、宽度、和来自 wndcomp_state 的高度。如果这些发生了变化，就像使用新的 props 调用 React 组件一样，它将被重新渲染。如果他们没有使用与最初渲染时相同的参数调用 svgrender 。在这种情况下，试剂不会重新渲染它(使用方括号。使用括号，它总是会重新渲染)。

效果相同，但 Reagent/React 跟踪依赖项的工作量较少。