Javascript – How to pass in a react component into another react component to transclude the first component’s content


Is there a way to pass one component into another react component? I want to create a model react component and pass in another react component in order to transclude that content.

Edit: Here is a reactJS codepen illustrating what I'm trying to do.


<div id="my-component">


/**@jsx React.DOM*/

var BasicTransclusion = React.createClass({
  render: function() {
    // Below 'Added title' should be the child content of <p>Hi!</p>
    return (
        <p> Added title </p>

React.renderComponent(BasicTransclusion(), document.getElementById('my-component'));

Best Answer

You can use this.props.children to render whatever children the component contains:

const Wrap = ({ children }) => <div>{children}</div>

export default () => <Wrap><h1>Hello word</h1></Wrap>
Related Question