反應卸載貝寶按鈕

Question

我有一個用Modal組件呈現的Paypal按鈕。 在不引發清理錯誤的情況下卸載Paypal按鈕的正確方法是什么？

這是對話框的實現

<Drawer anchor="bottom" open={open} onClose={() => setStatus(false)}>
        <section className={classes.innerDrawer}>
          <h2 className={classes.innerDrawerTitle}>
            {loading ? '' : 'Checkout'}
          </h2>
          <PaypalButton
            ...props
          />
    </section>
  </Drawer>

和按鈕

const Button = paypal.Button.driver('react', { React, ReactDOM });

return (
    <Button
      env={PAYPAL_ENV}
      client={client}
      payment={(data, actions) => payment(data, actions)}
      onAuthorize={data => execute(data.payerID, data.paymentID)}
      style={{
        size: 'medium', // tiny, small, medium
        color: 'blue', // orange, blue, silver
        shape: 'rect', // pill, rect
      }}
    />
  );

我收到的錯誤消息：

未捕獲的錯誤：窗口無響應-已清除

卸載成功后，我沒有收到此錯誤消息，這種情況發生在我處理付款時。

鏈接：

https://codesandbox.io/s/r4zvkjm2kq

Answer 1

我無法重現您的問題，但我嘗試執行與您相同的代碼。

在此示例中，PayPal按鈕安裝在Drawer元素中，該元素在單擊按鈕后安裝。 當您在抽屜外的任何位置單擊時，將卸載抽屜。

class Modal extends React.Component {
    constructor() {
      super()
      this.state = {
        open: false
      }
    }

    render () {      
      return (
        <div>
          <button onClick={() => this.setState({ open: true })}>Open Drawer</button>
          {
            this.state.open &&
            <Drawer anchor="left" open={true} onClose={() => this.setState({ open: false })}>
              <PayPalButton
                commit={this.state.commit}
                env={this.state.env}
                client={this.state.client}
                payment={(data, actions) => this.payment(data, actions) }
                onAuthorize={(data, actions) => this.onAuthorize(data, actions)}
                />
            </Drawer>
          }
        </div>
       )
    }
  }

工作演示： https : //codepen.io/herodrigues/pen/gqQEgr