[英]Javascript to Clojurescript interop with react-spring
我正在嘗試將react-spring
( https://www.react-spring.io/docs/hooks/basics )實現到我的 Clojurescript proct 中,我正在努力將其轉換為clojurescript
import {useSpring, animated} from 'react-spring'
function App() {
const props = useSpring({opacity: 1,
from: {opacity: 0}})
return <animated.div style={props}>I will fade in</animated.div>
}
到目前為止,這就是我所做的:我需要以下內容:
(:require
[useSpring]
[animated])
在 let 塊中我有這樣的東西:
(defn example-app []
(let [props (useSpring (->js {:opacity 1
:from {opacity: 0}}))]
(def props props)
[:animated.div {:style props} "I will fade in"]
))
變量props
返回:
#js{:opacity #object[AnimatedValue [object Object]]}
這就是我渲染動畫 object 的方式
(react-dom/render
(hx/f [example-app])
(goog.dom/getElement "example-app"))
這是我得到的錯誤
#object[Error Invariant Violation: Objects are not valid as a React child (found: object with keys {ns, name, fqn, _hash, cljs$lang$protocol_mask$partition0$, cljs$lang$protocol_mask$partition1$}). If you meant to render a collection of children, use an array instead.
in core$example_app]
我究竟做錯了什么? 我錯過了什么?
我確實設法獲得了一個基本示例,希望它可以幫助您入門:
yarn install react-spring
react-spring
shadow-cljs.edn
以添加對lilactown/hx
的依賴:{:source-paths ["src"]
:dependencies [[lilactown/hx "0.5.3"]]
:dev-http {8080 "target/"}
:builds {:app {:output-dir "target/"
:asset-path "."
:target :browser
:modules {:main {:init-fn app.main/main!}}
:devtools {:after-load app.main/reload!}}}}
我用 react-spring 示例替換了src/app/main.cljs
的內容,稍作調整:
(ns app.main
(:require [hx.react :as hx :refer [defnc]]
["react-dom" :as react-dom]
["react-spring" :as spring]))
(defnc AppComponent [{:keys [title]}]
(let [props (spring/useSpring (clj->js {:opacity 1 :from {:opacity 0}}))]
[:<>
[spring/animated.div {:style props} title]]))
;; App initialization
(defn mount-root []
(react-dom/render
(hx/f [AppComponent {:title "I will fade in"}])
(js/document.getElementById "app")))
(defn main! []
(mount-root)
(println "[core]: loading"))
(defn reload! []
(mount-root)
(println "[core] reloaded"))
最后,運行yarn install
下載任何缺失的 deps,然后yarn run html
和yarn shadow-cljs watch app
以 watch 模式啟動編譯器。 控制台將顯示如下內容:
$ yarn shadow-cljs watch app
yarn run v1.17.3
$ /tmp/cljs-react-intl/node_modules/.bin/shadow-cljs watch app
shadow-cljs - config: /tmp/cljs-react-intl/shadow-cljs.edn cli version: 2.8.74 node: v10.16.0
shadow-cljs - updating dependencies
...
shadow-cljs - dependencies updated
shadow-cljs - HTTP server available at http://localhost:8080
shadow-cljs - server version: 2.8.74 running at http://localhost:9630
shadow-cljs - nREPL server started on port 43685
shadow-cljs - watching build :app
[:app] Configuring build.
[:app] Compiling ...
[:app] Build completed. (156 files, 11 compiled, 0 warnings, 9.21s)
在http://localhost:8080加載應用程序后,您應該會看到如下內容:
animation 確實有效,但我不知道如何使其他示例工作(例如滾動示例或計數器)。
我希望這有幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.