成帧运动库“挂钩”不与试剂一起使用
成帧运动库“挂钩”不与试剂一起使用
提问于 2020-06-23 09:11:50
成帧器运动的路径标签可以与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}}]
))))并在my-component中使用[:> path]。但是当我滚动页面时，控制台日志不会被触发，这表明path-length变量在滚动时不会改变，也就是说，path组件不会在滚动时重新挂载。如何解决这个问题？
回答 1
Stack Overflow用户
发布于 2020-06-23 22:45:20
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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62525807
复制相关文章
相似问题
腾讯云开发者
