Yesterday I created a complex React menu component that needed to host another component. In order to do the same behavior in Angular v1 you would have probably used transclusion. In React in order to host a child/ren component inside a host parent component you can use the props.children property.
The following example shows a simple component that exposes the option to host other components:
A note – the code is written using ES2015 syntax.
In the example, the interesting part is the call to this.props.children. Using that call you “punch a hole” inside the component. When the component is being used and the developer hosts inside of it other components they will be inserted in the same place that you put the call to this.props.children.
Here is a usage example:
The output of rendering the component can look like:
All in all, this is a simple example of how to transclude a React component.
My hope is that this post will help you to craft much more sophisticated components.