Динамическая передача свойства в React из родительского элемента в дочерний элемент через FlowRouter/ReactLayout

Question

Я изучал React и как интегрировать его с Meteor за последние пару недель. Одна проблема, с которой я столкнулся, это то, что при использовании FlowRouter и ReactLayout я не могу понять, как передать свойства / функции из родительского / компоновочного компонента в дочерние компоненты, которые визуализирует ReactLayout. Вот пример того, что я пытаюсь сделать:

// 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
    }
  }
});

Должен отметить, что я знаю, как передавать свойства компонентам, которые не изменяются динамически - визуализировать непосредственно в MainLayout. Это не то, что я пытаюсь сделать, однако. Большое спасибо!

Answer 1

Если вы передаете функцию в качестве опоры в DynamicComponent1, то я считаю, что вы должны передавать функцию в DynamicComponent1 из вызова ReactLayout.render.

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

Вы можете получить доступ к переданной функции через this.props.functionPassed,

Возможно, это не лучшая практика, но, по крайней мере, она должна работать при использовании ReactLayout.