Fork me on GitHub
#reagent
<
2019-08-26
>
restenb13:08:53

how can I access JavaScript's this from inside a Reagent component? this-as doesn't seem to give me anything other than the global this

David Pham13:08:24

did you try reagent/current-component?

Lone Ranger16:08:17

do you mean the this specifically or the dom node?

Lone Ranger16:08:42

you can always get this with this-as, to get the dom node you need reagent.dom/dom-node

Lone Ranger16:08:00

the way you would use it in a component you'd have to make use of the :ref key

Lone Ranger16:08:07

(defn some-component [data]
  (let [dom-node (reagent/atom nil)]
    (fn []
      [:div
       {:ref (when %
               (reset! dom-node (reagent.dom/dom-node %)))}])))

Lone Ranger16:08:13

something like that

Lone Ranger16:08:31

probably easiest way to do it without a form-3 component

scknkkrer17:08:58

> If you want to use your own build of React (or React from a CDN), you have to use :exclusions variant of the dependency, and also provide a file named “cljsjs/react.cljs”, containing just (ns cljsjs.react), in your project.

scknkkrer17:08:11

Actually, I have encountered this error in my compilation; http://reactjs.org/docs/error-decoder.html?invariant=227

scknkkrer17:08:55

I think my forieng-libs defination is just right. But, I think I’ve fall for a hidden pitfall. :face_with_rolling_eyes:

Lone Ranger17:08:55

That could be due to a lot of things... how are you compiling?

jahson17:08:12

@scknkkrer can you provide a smallest possible example? Like stripped out version of your project where the issue reproduces?

juhoteperi17:08:58

@scknkkrer Did you load just React from CDN? You need to also load React-dom from CDN.

scknkkrer17:08:35

Here is my foreign-libs defination in my project.clj file.

[{:file "app/prod/js/bundle.js"
                                                               :provides ["react" "react-dom" "create-react-class" "react-dom/server"]
                                                               :global-exports {react React
                                                                                react-dom ReactDOM
                                                                                create-react-class createReactClass
                                                                                react-dom/server ReactDOMServer}}]

scknkkrer17:08:56

They are installed via NPM to my project directory.

scknkkrer17:08:56

Oh, I know that the problem is in my code. It’s not about reagent.

scknkkrer17:08:15

I have to understand advanced optimization deeply. 😔

scknkkrer18:08:27

@jahson, I mean, the internal mechanics of it. Did you guys know about, did using keyword in case function to match a value cause bug in other than none for optimizations flag ?

scknkkrer21:08:57

I figured out my problem’s source.

Aklscc08:08:55

Actually, it's unnecessary to write a externs file for JS libraries. Most of the compilers support auto infer, such as shadow-cljs, to learn quickly in: https://shadow-cljs.github.io/docs/UsersGuide.html#_simplified_externs

scknkkrer21:08:04

The Externs dilemma.

scknkkrer21:08:20

My project depends on a couple of JS libraries.

scknkkrer21:08:33

I have to deal with them.

Aklscc08:08:55

Actually, it's unnecessary to write a externs file for JS libraries. Most of the compilers support auto infer, such as shadow-cljs, to learn quickly in: https://shadow-cljs.github.io/docs/UsersGuide.html#_simplified_externs