反応するコンポーネントの配列を出力し、親の「この」子

Question

内のaa小道具を使用して、私はそれに注入していますすべての別々のビューが小道具を経由して

const steps = 
[ <StepOne wizardContext={shippingObj.from} onAction={this.handleFrom}/>, 
    <StepTwo wizardContext={shippingObj.to} onAction={this.handleFrom} />, 
    <StepThree wizardContext={shippingObj.weight} onAction={this.handleFrom} />, 
    <StepFour wizardContext={shippingObj.shippingOption} onAction={this.handleFrom} />, 
    <Confirm wizardContext={shippingObj} onAction={this.handleFrom} /> 
] 
<Wizard steps={steps}/> 

親のしているコンポーネントの配列を持っているへのアクセス権を持ちますウィザードのコンポーネントでは、私はメソッドに持っているウィザードコンポーネントで

{this.props.steps[this.state.compState]} 

また、実際のステップに基づいて、各ステップをレンダリングしてい

handleFrom(val) { 
    let state = val.stage, 
    key = Object.keys(val)[0]; 
    this.setState({ 
     wizardContext: { ...this.state.wizardContext, [key]: val[key]} 
    }) 
    } 

は

しかしonActionそれは私が親ウィザードコンポーネント内に個別にそれらの一つ一つが含まれている場合、私はこれへのアクセス権を持っているし、それが

/*THIS WORKS */ 
switch (this.state.compState) { 
     case 1: 
     return <StepOne onAction={this.handleFrom} data={this.state.wizardContext.from} /> 
     case 2: 
     return <StepTwo onAction={this.handleFrom} data={this.state.wizardContext.to} /> 
     case 3: 
     return <StepThree onAction={this.handleFrom} data={this.state.wizardContext} /> 
     case 4: 
     return <StepFour onAction={this.handleFrom} data={this.state.wizardContext.shippingOption} /> 
     case 5: 
     return <Confirm shippingLabel={this.state.wizardContext} labelkeys={this.shippingKeys} /> 
    } 

の作品「この」

へのアクセス権を持っていないという意味定義されていませんしかし、私は実際のウィザードからステップを切り離したいと思っています

子がコンポーネントの配列である場合、このメソッドまたは親メソッドにアクセスする方法はありますか？これを行うためのよりクリーンな方法がありますか？ コンポーネントは、単に「この」小道具 に任意の建設的なフィードバックが

Answer 1

を高く評価している問題は、あなたがWizardコンポーネントのsteps外のあなたの配列を作成しているということなので、this状況にはないへのアクセスを持っていないレンダリングされますWizardに戻ります（したがって、適切なhandleFromメソッドはありません）。

Wizardのrenderメソッドで正しいthis.handleFromメソッドを小道具として動的に注入することでこの問題を解決できます。 「あなたはWizardでthis.handleFrom = this.handleFrom.bind(this);があることを確認してください

{ 
    React.cloneElement(
     this.props.steps[this.state.compState], 
     {onAction: this.handleFrom} 
    ) 
} 

：これで

{this.props.steps[this.state.compState]} 

：この行を置き換え、その後

const steps = 
[ <StepOne wizardContext={shippingObj.from} />, 
    <StepTwo wizardContext={shippingObj.to} />, 
    <StepThree wizardContext={shippingObj.weight} />, 
    <StepFour wizardContext={shippingObj.shippingOption} />, 
    <Confirm wizardContext={shippingObj} /> 
] 
<Wizard steps={steps}/> 

：まず、あなたのsteps配列からonAction小道具を削除適切なコンテキストをバインドします。

steps配列のコンテキストにはthis.handleFromが含まれていません。したがって、適切なコンテキストが利用可能なWizardコンポーネント内にonAction={this.handleFrom}小道具を注入します。 cloneElementの詳細については、this question and answerを参照してください。