javascript - Reactjs 将 props 传递给 2 个组件

Question

在我的项目中，我有一个付款表单，它有条件地呈现 2 个 Stripe 元素(PaymentRequestForm.js 和 CheckoutForm.js)，我已将 Props 从主表单组件 FullfillRequest.js 传递到 PaymentRequestForm.js，但是我努力将相同的 props 传递给 CheckoutForm.js。 该 Prop 的功能是在 Stripe 付款完成后提交表单。

在当前设置下，错误是 this.props.setComplete() 在 CheckoutForm.js 中未定义。

FulfillRequest.js

  setComplete = val => {
    this.setState({
      complete: val
    });
  };

 render() {
return <PaymentRequestForm
setComplete={this.setComplete}
complete={this.state.complete}
requestId={this.props.requestId}
/>

  <Button disabled={loading || !this.state.complete} >
 Fulfill Request
</Button>
}

PaymentRequestForm.js

class PaymentRequestForm extends React.Component {
  constructor(props) {
    super(props);

   paymentRequest.on("token", async ev => {
      const response = await fetch();
      if (response.ok) {
            this.props.setComplete(true);
      } 
    });

    this.state = {
      canMakePayment: false,
      paymentRequest,
      complete: false
    };
  }

  render() {
    if (this.props.complete) return <h1>Purchase Complete</h1>;
     return this.state.canMakePayment ? (
      <PaymentRequestButtonElement />
    ) : (
      <CheckoutForm
        setComplete={this.setComplete}
        complete={this.state.complete}
        requestId={this.props.requestId}
      />
    );

CheckoutForm.js

class CheckoutForm extends Component {
  constructor(props) {
    super(props);
    this.state = { complete: false };
    this.submit = this.submit.bind(this);
  }
  async submit(ev) {
    let response = await fetch();
    if (response.ok) {
      this.props.setComplete(true);
       }
  }

  render() {
    if (this.props.complete) return <h1>Purchase Complete</h1>;
    return (
           <Button onClick={this.submit}>
            Send
          </Button>
       );
  }
}

任何帮助将不胜感激，谢谢!

Answer 1

在 PaymentRequstForm 内部 setComplete 可以通过 this.props.setComplete 访问，而不是 this.setComplete (因为它即将到来)来自FulfillRequest)

  render() {
    if (this.props.complete) return <h1>Purchase Complete</h1>;
     return this.state.canMakePayment ? (
      <PaymentRequestButtonElement />
    ) : (
      <CheckoutForm
        setComplete={this.props.setComplete}
        complete={this.state.complete}
        requestId={this.props.requestId}
      />
    );