javascript - Reactjs 向下传递 props 2 个组件

Question

在我的项目中，我有一个支付表单，它有条件地呈现 2 个 Stripe 元素（PaymentRequestForm.js 和 CheckoutForm.js），我已经将道具从主表单组件 FullfillRequest.js 传递到 PaymentRequestForm.js，但是我正在努力传递CheckoutForm.js 的相同道具。props 的作用是在 Stripe 支付完成后提交表单。

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

完成请求.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>
       );
  }
}

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

标签： javascriptreactjs

Answer 1

内部PaymentRequstForm setComplete可通过this.props.setCompletenot访问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}
      />
    );