Fork me on GitHub
#reagent
<
2016-12-21
>
joshkh11:12:59

how might one go about "applying" arguments to a reagent component? for example, something like (apply mycomponent ["Bob" "Smith"])?

seantempesta12:12:35

@joshkh: Is there a reason you can’t just pass the arguments directly? Also, keep in mind that hiccup is just data. So you as long as you return a vector with the reagent component and the arguments, it should render.

joshkh12:12:16

gotcha. i was actually trying [(apply mycomponent ["Bob" "Smith"])] inside other components with weird results. it was more of a curiosity... i've seen some components accept arguments as options, such as [component :value 1 :label "First"] and i already have those options in a map, so it'd be nice to apply those maps to the component

joshkh12:12:49

i was looking at the re-com component library and wondering why they chose that "options" style: https://github.com/Day8/re-com/blob/master/src/re_com/buttons.cljs#L29

seantempesta12:12:31

Yeah, there’s many ways you can do it. I started out having reagent components all take custom arguments and I’ve pretty much switched across the board to [component-name {:options “map”} children] just like standard react components. I find it’s pretty easy to just destructure the options in the component from the map and it’s much more readable.

joshkh12:12:09

yeah, i lean towards that style as well. i was just curious about the advantages of the different ways. perhaps spelling out the arguments as options makes it easier for the next dev to see what's passing through the component

joshkh12:12:38

thanks for the input 🙂

seantempesta12:12:04

Another plea for help. I’m hopelessly confused how to create a react component like this in reagent:

class HomeScreen extends React.Component {
 
 static route = {
    navigationBar: {
      title: 'Home',
    }
  }

  render() {
    return (
      <View style={{alignItems: 'center', justifyContent: 'center', flex: 1}}>
        <Text>HomeScreen!</Text>
      </View>
    )
  }
}
The render function is easy of course, but how do I get the route definition in there?

seantempesta12:12:35

This isn’t working:

(defn HomeScreen []
  (r/create-class
    {:route (clj->js {:navigationBar {:title "Home"}})
     :reagent-render
            (fn []
              [:> View {:style {:alignItems     "center"
                                :justifyContent "center"
                                :flex           1}}
               [:> Text {} “HomeScreen”]])}))

kauko13:12:09

@seantempesta I don't know if the static thing does something extra, but I'd just wrap the r/create-class in a let and define the route in there 🙂

seantempesta13:12:17

I need the route property to be readable from within a third party react component. And apparently the only way to pass it is via this ES6 style class creation.