0

ここ数週間、React とそれを Meteor に統合する方法を学んできました。私が直面している問題の 1 つは、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で直接レンダリングします。ただし、これは私がやろうとしていることではありません。どうもありがとう！

4

1 に答える 1

0

関数をプロップとして DynamicComponent1 に渡す場合は、関数を ReactLayout.render 呼び出し内から DynamicComponent1 に渡す必要があると思います。

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

を介して渡された関数にアクセスできますthis.props.functionPassed。

これはベスト プラクティスではないかもしれませんが、少なくとも ReactLayout を使用する場合は機能するはずです。

于 2015-12-03T23:30:11.690 に答える