Взаимодействие Javascript с Clojurescript с помощью react-spring

Я пытаюсь реализовать react-spring (https://www.react-spring.io/docs/hooks/basics) в мой процесс Clojurescript, и я изо всех сил пытаюсь перевести это на 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]]}

Чем я визуализирую анимированный объект

(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]

Что я делаю не так? Что мне не хватает?


person Community    schedule 21.11.2019    source источник
comment
в чем ошибка реакции?   -  person jstuartmilne    schedule 21.11.2019
comment
Я отредактировал вопрос и добавил ошибку. Спасибо   -  person    schedule 21.11.2019
comment
См. этот ответ для аналогичного примера другой библиотеки React, используемой из проекта ClojureScript: stackoverflow.com/a/58871983/483566   -  person Denis Fuenzalida    schedule 22.11.2019
comment
@DenisFuenzalida см. выше, что я тоже пробовал. Я не использую реагент   -  person    schedule 22.11.2019


Ответы (1)


Мне удалось заставить базовый пример работать, надеюсь, он поможет вам начать работу:

  • Я клонировал свой пример репозитория: https://github.com/dfuenzalida/cljs-react-intl/ (это я создал для теста на react-intl, вам тоже подойдет)
  • Из проверенного репозитория я установил react-spring с yarn install 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!}}}}

Я заменил содержимое 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, чтобы загрузить недостающие файлы, а затем yarn run html и yarn shadow-cljs watch app, чтобы запустить компилятор в режиме просмотра. Консоль покажет что-то вроде:

$ 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 вы должны увидеть что-то вроде:

скриншот кода и браузера

Анимация на самом деле работает, но я не мог понять, как заставить работать другие примеры (например, пример прокрутки или счетчик).

Надеюсь, это поможет!

person Denis Fuenzalida    schedule 23.11.2019
comment
Что означает это :<>? - person ; 24.11.2019
comment
Ах, я вижу фрагменты реакции - person ; 24.11.2019