反応アプリでサードパーティの拡張機能を使用するにはどうすればよいですか？

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> 

どのように私はそれを反応で実装しますか。私はonClickをボタンに置​​くことができ、rzp1.open（）;を呼び出すことができます。しかし、私はそれが未定義になると思う。また、はindex.htmlファイルからロードする必要がありますか？私はここで非常に混乱しています。私を助けてください。

Answer 1

セットアップaにしたい場合は、これを行うためのコンポーネントを反応させ、私はあなたをお勧めします（のためのものであるコンポーネントを反応厥！）それが拡張し、再利用可能

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