输出一组反应组件并使用子级中的道具访问父级的“this”

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

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

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

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

确保Wizard 的构造函数中有this.handleFrom = this.handleFrom.bind(this);，以便绑定适当的上下文。

这里发生的情况是steps 数组的上下文没有this.handleFrom。因此，您将 onAction={this.handleFrom} 属性注入到 Wizard 组件中，其中适当的上下文可用。有关cloneElement 的更多信息，请参阅this question and answer。