With the future of Angular 1.x development coming to a head, our team started looking at other front end technologies that could potentially live side by side with angular 1.x and eventually (a long time down the road) replace our angular 1.x app completely. We considered a few frameworks and ended up settling on React.js.
One of the problems I recently worked on required a multi selectable list of items. The catch was that I wanted to allow the template of the item to customizable while allowing for most of the functionality to be the same. I realized that you could pass in a function as a property, and wondered why not a react component class. It is essentially a function. I tried it out and it ended up working. Here is a JSFiddle with using that idea:
So in the container class, CustomList, I accept an optional parameter called itemTemplate. It should be a function. I then set a variable called ItemTemplate to be either the itemTemplate passed in or the DefaultRow class. The key thing here to note is that you must make your ItemTemplate variable name capitalized. React has a convention that you custom elements need to be capitalized. I can then just pass whatever properties to each item instantiation and each one can format however they like. Super Easy!
 |
| Shamelessly stolen picture from work HipChat room. |
One of the problems I recently worked on required a multi selectable list of items. The catch was that I wanted to allow the template of the item to customizable while allowing for most of the functionality to be the same. I realized that you could pass in a function as a property, and wondered why not a react component class. It is essentially a function. I tried it out and it ended up working. Here is a JSFiddle with using that idea:
So in the container class, CustomList, I accept an optional parameter called itemTemplate. It should be a function. I then set a variable called ItemTemplate to be either the itemTemplate passed in or the DefaultRow class. The key thing here to note is that you must make your ItemTemplate variable name capitalized. React has a convention that you custom elements need to be capitalized. I can then just pass whatever properties to each item instantiation and each one can format however they like. Super Easy!
No comments:
Post a Comment