Better component transclusion in React with ‘outlets’

As a believer of Facebook React’s principles, here’s an explanation of how React handles transclusion, and how it can be improved.

What is transclusion?

In terms of UI development, transclusion is when a child component is declared from inside of parent component, and the child component is agnostic to its parent. This allows for a nested, flowing and declarative component hierarchy.

Basic transclusion in React

React is able to handle basic transclusion out of the box using the this.props.children property, which is an array of all components that have been declared directly inside of the current component, like so:

var MyExample = React.createClass({ displayName: 'MyExample', render: function() { return (MyComponent(null, React.DOM.p(null, "This paragraph is...

Continue reading