Given a function to return an element:
(defn title []
[:h1 "Hello World"])
What is the preferred way of nesting this inside another component?
I've seen it done in a tutorial by wrapping the function call in a vector:
[:div {:class "app"}
[title]]
but this seemed a little weird to me as the return value of title
is a vector itself and so would expand to [[:h1 "Hello World"]]
. What happens to the outer vector?
It also works to just evaluate the function inline:
[:div {:class "app"}
(title)]
but I'm not sure if this is a good idea given the mix of parens and square brackets it could be hard to read.
Any opinions?
This is more specific to reagent than to hiccup(ish html-generators) -- it may or may not work with different frameworks or hiccup on the server-side.
Reagent takes a function in place of a "tag" and treats it as a react component. Note that
[title]
is not calling the function. It's a vector, that holds the reference to the function.So the difference here is, whether you want
title
being treated like a component (with all that comes with it (when using[title]
)) or if you just call(title)
there and it will place the result right there in the vector.There is a whole tutorial page dedicated to that: