0

I've been learning React and how to integrate it with Meteor over the past couple weeks. One issue I've been running into, is when using FlowRouter and ReactLayout, I can't seem to figure out how to pass properties/functions from the parent/layout component to child components that ReactLayout renders. Here is an example of what I am trying to do:

// Layout component with function to pass
MainLayout = React.createComponent({
  functionToPass() {
  do some stuff...
  },

  render() {
    return (
      <div>
        {this.props.content}
      </div>
    )
  }
});

// Component to pass into main layout
DynamicComponent1 = React.createComponent({
  render() {
    return (
      <div>
        <h1>This component will change</h1>
        <button onClick={this.props.functionToPass}>Press me!</button> // property passed from layout component
      </div>
    )
  }
});

// FlowRouter
FlowRouter.route('/', {
  action() {
    ReactLayout.render(MainLayout, {
      content: <DynamicComponent1 />  // Somehow I need to pass MainLayout.functionToPass() to DynamicComponent1 here
    }
  }
});

I should note that I know how to pass properties to components that aren't dynamically changing - render directly in MainLayout. This is not what I am trying to do, however. Many thanks!

bgmaster
  • 2,313
  • 4
  • 28
  • 41

1 Answers1

0

If you are passing the function as a prop to DynamicComponent1, then I believe you should be passing the function to DynamicComponent1 from inside the ReactLayout.render call. 

ReactLayout.render(MainLayout, {
  content: <DynamicComponent1 functionPassed={MainLayout.functionToPass} />
}

You can access the passed function via this.props.functionPassed.

This may not be best practices, but it should at least work when using ReactLayout.

etmarch
  • 1
  • 3
  • Thanks. I actually tried that way, and didn't have any luck. I followed this thread, and ended up cloning the element to get it to work. I would have preferred the solution you suggested, but I didn't have any luck. https://forums.meteor.com/t/how-to-pass-reactive-data-to-children-using-flow-router-and-react-layout/11888/5 – bgmaster Dec 04 '15 at 13:06
  • Interesting, I'm curious as to why this method works for some, but others have to resort to cloning... – etmarch Dec 09 '15 at 05:13