如何在反應應用程序中使用第三方擴展？

Question

我在我的反應應用程序中實施了razorpay付款。以下是文檔中給出的代碼。

<button id="rzp-button1">Pay</button> 
    <script src = "https://checkout.razorpay.com/v1/checkout.js" > </script> 
     <script> 
    var options = { 
     "key": "YOUR_KEY_ID", 
     "amount": "2000", // 2000 paise = INR 20 
     "name": "Merchant Name", 
     "description": "Purchase Description", 
     "image": "/your_logo.png", 
     "handler": function (response) { 
     alert(response.razorpay_payment_id); 
     }, 
     "prefill": { 
     "name": "Harshil Mathur", 
     "email": "harshil@razorpay.com" 
     }, 
     "notes": { 
     "address": "Hello World" 
     }, 
     "theme": { 
     "color": "#F37254" 
     } 
    }; 
    var rzp1 = new Razorpay(options); 

    document.getElementById('rzp-button1').onclick = function (e) { 
     rzp1.open(); 
     e.preventDefault(); 
    } 
    </script> 

那麼我該如何在反應中實現它。我可以把點擊按鈕，並可以調用rzp1.open（）;.但我認爲這將通過未定義的。還應該從index.html文件加載https://checkout.razorpay.com/v1/checkout.js？我在這裏非常困惑。請幫助我。

Answer 1

，如果你想建立一個

反應成分要做到這一點，我會建議你把它擴展和可重複使用的（那是什麼反應的組分是！）

class RazorPay extends Component { 
    constructor(props){ 
     super(props); 
     this.options = Object.assign(
      {}, 
      { 
       "key": "YOUR_KEY_ID", 
       "amount": "2000", // 2000 paise = INR 20 
       "name": "Merchant Name", 
       "description": "Purchase Description", 
       "image": "/your_logo.png", 
       "handler": (response) => { 
        alert(response.razorpay_payment_id); 
       }, 
       "prefill": { 
        "name": "Harshil Mathur", 
        "email": "harshil@razorpay.com" 
       }, 
       "notes": { 
        "address": "Hello World" 
       }, 
       "theme": { 
        "color": "#F37254" 
       } 
      }, 
      props.rzp1 // any options you pass via props will override the defaults 
     ); 
    } 

    componentWillMount(){ 
     this.rzp1 = new window.Razorpay(options); 
    } 

    handleClick = (e) => 
     this.rzp1.open(); 
     e.preventDefault(); 
    } 

    render(){ 
     return(
      <div> 
       <button onClick={this.handleClick}>Open</button> 
      </div> 
     ) 
    } 
} 

使用該組件並傳遞不同的金額收取你只想做這樣的事情

const someOptions = {amount: '100'}; // somewhere in the render method. 

<RazorPay rzp1={someOptions} /> // somewhere in the return of the render method 

建議：移動大多數的這些默認選項，你可以導入和使用配置文件。嘗試儘可能地抽象。它會讓你的代碼更容易使用

Answer 2

您可以通過在componentDidMount()中應用第三方庫來使用第三方庫。即您可以在呈現後將library綁定到DOM。

您的情況library不需要DOM元素，但某些選項與DOM無關。所以你也可以在渲染你的component之前初始化它。

舉例說明您的情況。

class YourComponentWithButton extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state = { 
     rzp1: null //holds your external library instance 
     //your initial state if any 
    } 
    } 
    componentDidMount(){ //you can also keep this code in componentWillMount() 
    var options = { 
     "key": "YOUR_KEY_ID", 
     "amount": "2000", // 2000 paise = INR 20 
     "name": "Merchant Name", 
     "description": "Purchase Description", 
     "image": "/your_logo.png", 
     "handler": function (response) { 
     alert(response.razorpay_payment_id); 
     }, 
     "prefill": { 
     "name": "Harshil Mathur", 
     "email": "harshil@razorpay.com" 
     }, 
     "notes": { 
     "address": "Hello World" 
     }, 
     "theme": { 
     "color": "#F37254" 
     } 
    }; 
    this.setState({ 
     rzp1 : new window.Razorpay(options) 
    }) 
    } 

    buttonClick(event){ 
     if(state.rzp1){ //sanity check whether library loaded to varibale 
     this.state.rzp1.open(); 
     } 
     e.preventDefault(); 
    } 

    render(){ 
    return(
     <div className="your-container"> 
      <button onClick={this.buttonClick.bind(this)}>Your Button</button> 
     </div> 
    ) 
    } 
}