如何在反应应用程序中使用第三方扩展？

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