0

framer 运动的 path 标签可以与 useViewportScroll 结合使用来创建滚动信息路径。

const { scrollYProgress } = useViewportScroll()

return (
  <motion.path style={{ pathLength: scrollYProgress }} />
)

当与 Clojurescript 一起使用时，这不起作用：


(def div (.-div motion))
(def path (.-path motion))

(defn my-component []
    [:> div 
       [:> path {:style {:pathLength (.-scrollYProgress (useViewportScroll))}}]]

)

错误是：


Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See  for tips about how to debug and fix this problem.

- 编辑 -

根据答案，我改为：

(defn path []
  (let [path (.-path motion)
        path-length (.-scrollYProgress (useViewportScroll))]
    (r/as-element
     (do
       (js/console.log "path length is " path-length)
       [:> path {:style {:pathLength path-length}}]
       ))))

并[:> path]在我的组件中使用。但是当我滚动页面时没有触发控制台日志，这表明滚动时路径长度变量没有改变，即路径组件没有随着滚动重新安装。如何解决这个问题？

4

1 回答 1

0

Hiccup 样式组件不适用于 Hooks，因为为了解释返回的 hiccup，Reagent 创建了一个类组件，而不是功能组件（坦率地说，这可能是一个历史上的奇怪现象，因为 Reagent 早于 hooks API）。

相反，您需要通过传递reagent.core/create-element一个函数来创建一个功能组件，但在该函数中，您要么必须手动创建 React DOM 元素，要么自己转换打嗝。请参阅：https ://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md#function-components

于 2020-06-23T14:45:19.910 回答