Simple Component to include Meteor Templates on React Components

IncludeTemplate.coffee

# see https://github.com/reactjs/react-meteor
# and https://github.com/jhartma/meteor-cjsx

@IncludeTemplate = React.createClass

  componentDidMount: () ->
    componentRoot = React.findDOMNode(@)
    parentNode = componentRoot.parentNode
    parentNode.removeChild(componentRoot);
    Blaze.render @props.template, parentNode

  render: (template) ->
    <div />

IncludeTemplate.js

// see https://github.com/reactjs/react-meteor

var IncludeTemplate = React.createClass({
  componentDidMount: function() {
    var componentRoot = React.findDOMNode(this);
    var parentNode = componentRoot.parentNode;
    parentNode.removeChild(componentRoot);
    return Blaze.render(this.props.template, parentNode);
  },
  render: function(template) {
    return (<div />)
  }
});

usage.coffee

# see https://github.com/reactjs/react-meteor
# and https://github.com/jhartma/meteor-cjsx

ReactMeteor.createClass

  templateName: 'NavbarRight'

  getMeteorState: () -> {}

  render: () ->
    <div id="navbar" className="navbar-collapse collapse">
      <ul className="nav navbar-nav navbar-right">
        <li><a href="#">Dashboard</a></li>
        <IncludeTemplate template={Template._loginButtons} />
      </ul>
    </div>

@Batistleman : return Blaze.render(this.props.template, this.props.data, parentNode);

Does this statement work because
Blaze.render = function (content, parentElement, nextNode, parentView) , where does it accept data?

It must be renderWithData I guess. The snippet working for me is:

IncludeBlaze = React.createClass({
    propTypes: {
        template: React.PropTypes.object.isRequired
    },

    componentDidMount() {
        var componentRoot = ReactDOM.findDOMNode(this);
        var parentNode = componentRoot.parentNode;
        // Render the Blaze template on this node
        this.view = Blaze.renderWithData(this.props.template, this.props.data, parentNode, componentRoot);
        parentNode.removeChild(componentRoot);
    },

    componentWillUnmount() {
        // Clean up Blaze view
        Blaze.remove(this.view);
    },

    render() {
        return <div />;
    }
});

The snippet shown in previous comments is not working as expected. The reason is, it tries to render as last child of parent element after all other elements already rendered, not in the place where you leave <IncludeTemplate .../> tag.

Thanks! Works really nice.

For SSR i propose using a string to identify the template, becaues Template is not defined on the server, i.e.

IncludeBlaze = React.createClass({
    propTypes: {
        template: React.PropTypes.string.isRequired
    },

    componentDidMount() {
        var componentRoot = ReactDOM.findDOMNode(this);
        var parentNode = componentRoot.parentNode;
        // Render the Blaze template on this node
        this.view = Blaze.renderWithData(Template[this.props.template], this.props.data, parentNode, componentRoot);
        parentNode.removeChild(componentRoot);
    },

    componentWillUnmount() {
        // Clean up Blaze view
        Blaze.remove(this.view);
    },

    render() {
        return <div />;
    }
});

Thanks works super well. This is the variant I am using with refs:

IncludeBlaze = React.createClass({

    propTypes: {
         template: React.PropTypes.object.isRequired
     },


    componentDidMount() {

        var componentRoot = ReactDOM.findDOMNode(this.container);
        var parentNode = componentRoot.parentNode;
        // Render the Blaze template on this node
        this.view = Blaze.renderWithData(this.props.template, this.props.data, parentNode, componentRoot);
        parentNode.removeChild(componentRoot);

    },

    componentWillUnmount() {
        // Clean up Blaze view
        Blaze.remove(this.view);
    },

    render() {
        return (
          <span
              ref={(c) => this.container = c}
          />
        );
    }
});


module.exports = IncludeBlaze;