How to pass reactive data to children using Flow Router and React Layout

shcherbin · October 21, 2015, 7:21pm

Okay, I managed to do what I wanted from the beginning.

Structure

<AdminLayout> (has reactive data and passes it to children)
  <AdminPermissions> (has the props from parent)

Router

FlowRouter.route('/test', {
  action: function () {
    ReactLayout.render(AdminLayout, {
      content: AdminPermissions
    });
  }
});

AdminLayout (here we have the global user prop to send it to children)

AdminLayout = React.createClass({
  mixins: [ReactMeteorData],
  getMeteorData() {
    return {
      currentUser: Meteor.user()
    };
  },
  render() {
    let content = React.createElement(this.props.content, {
      user: this.data.currentUser
    });

    return (
      <section>
        {content}
      </section>
    );
  }
});

AdminPermissions (has the user props from parent)

AdminPermissions = React.createClass({
  render() {
    return (
      <section>
        <p>{this.props.user.username}</p>
      </section>
    );
  }
});

p.s. Don’t forget to check if we have the user

Is this the correct way to do that?

@sashko maybe we can add to the guide, how this is advised to be done?