Question

我有一个组件数组，这些组件都是单独的视图，我通过一个道具注入它的父级

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”

如果我在父向导组件中单独包含它们，我可以访问它并且它可以正常工作

/*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} />
    }

但是我想将这些步骤与实际向导分离

如果子组件是一个组件数组，是否有办法从子组件访问此方法或父方法？有更清洁的方法吗？组件将呈现只是在道具中无法访问“this” 任何建设性的反馈表示赞赏

Answer 1

问题是您要在steps组件之外创建Wizard数组，因此this上下文不会指向Wizard（因此没有适当的handleFrom方法。

您可以通过在this.handleFrom的{{1}}方法中动态注入正确的Wizard方法作为道具来解决此问题。首先，从render数组中删除onAction道具：

steps

然后，替换这一行：

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

用这个：

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

确保{ React.cloneElement( this.props.steps[this.state.compState], {onAction: this.handleFrom} ) }的构造函数中包含this.handleFrom = this.handleFrom.bind(this);，以便绑定适当的上下文。

这里发生的事情是Wizard数组的上下文没有steps。因此，您可以在this.handleFrom组件中注入onAction={this.handleFrom} prop，其中有适当的上下文可用。有关Wizard的详细信息，请参阅this question and answer。

输出一组反应组件，并使用子

1 个答案: