“Portals” in React.js
(Another day, another bit of terminology made up by me.)
“Portals” is a pattern that I’ve recently tried in a React project, which allows a component to control another part of the existing DOM entirely.
It passes a string reference from a component, to match a DOM element’s ID attribute elsewhere. I can imagine this is useful if you don’t want all your apps to be aware of properties, essentially decoupling the component tree from the DOM tree.
This is currently a one-time experiment. It is an extension of the ReactLayeredMixin pattern, which itself renders some DOM to a new element on the page. However, instead of creating a new DOM element, you link to one by passing an ID of an element as a string, and that is used as a document.getElementById(this.props.portal)
It’s actually quite similar to yield[:whatever]
in Ruby on Rails views and layouts.
Warning: this will probably only work if you plan to mount the DOM portal before the triggering component.
Demo #
You can try this on JSFiddle:
http://jsfiddle.net/joecritch/fU9Bp/
Thoughts #
If you have any thoughts on this, please tweet me. I’d love to know if you think this is a huge anti-pattern, as I’m actually finding it quite handy.