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

Последние пару недель я изучал 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. Однако это не то, что я пытаюсь сделать. Большое спасибо!


reactjs meteor react-jsx flow-router
person bgmaster    schedule 22.11.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

person etmarch    schedule 03.12.2015
comment
Спасибо. Я действительно пытался таким образом, и мне не повезло. Я следил за этой веткой и в итоге клонировал элемент, чтобы заставить его работать. Я бы предпочел предложенное вами решение, но мне не повезло. forums.meteor.com/t/ - person bgmaster; 04.12.2015
comment
Интересно, мне любопытно, почему у одних этот метод работает, а другим приходится прибегать к клонированию... - person etmarch; 09.12.2015