0

我在我的反应代码中使用了一个外部脚本。为了您的理解，我编写了下面的代码-

import React, { Component, PropTypes } from 'react';

export default class GetIframe extends Component {
   constructor(props) {
     super(props);
   }

   componentDidMount() {
     this.configureExternalScript();        
   }

   configureExternalScript() {
        var getscript = document.createElement("script");  // create a script DOM node
        getscript.src = <external-script-url>;  // set its src to the provided URL
        document.head.appendChild(getscript);

        getscript.onload = function() {

            if(<external-script-name>) {

                <external-script-name>.SetProperties(
                    {
                    "email": <email-id>,
                    "image": <image-link>,
                    "button_label": <label>,
                    "currency": <symbol>,
                    "amount": <produt-amount>,
                    "lang": <lang>,
                    "form_id": "commerce_form",
                    "autoSubmit": "true"
                    }
                );

                <external-script-name>.SetStyle(
                    {
                    "backgroundColor": "ffffff",
                    "buttonColor": "555555",
                    "buttonHoverColor": "777777",
                    "buttonTextColor": "ffffff",
                    "buttonTextHoverColor": "ffffff",
                    "inputBackgroundColor": "ffffff",
                    "inputTextColor": "767676",
                    "inputErrorColor": "ff0000",
                    "inputAddonBackgroundColor": "ffffff",
                    "labelColor": "494949"
                    }
                );

                <external-script-name>.AddActionButton("buttonId");

                <external-script-name>.GetCustomToken(<number>, <email-id>, <number>);

                let isModalOpened = false;
                let tokenCreated = false;
                let tokenId = "0121223_sdwds_rtrt";
                let lastFour = "0002";

                <external-script-name>.Bind("opened", ()=> {
                    console.log('opened');
                    isModalOpened = true;
                });

                <external-script-name>.Bind("notificationReceived", (e) => {
                    console.log('NotificationReceived', e);
                });

                <external-script-name>.Bind("tokenCreated", (e) => {
                    tokenId = e.TokenId;
                    let cardBrand = "";
                    let cardName = "";
                    if(e.Last4 != null && e.Last4 != "null") {
                        lastFour = e.Last4;
                        cardBrand = e.Brand;
                        cardName = e.Name;
                    }
                });

                <external-script-name>.Bind("closed", (e) => {
                    console.log('closed', e);

                });

                <external-script-name>.GetNotification((e) => {
                    console.log('getNotification', e);
                })

            }
        }
    }

    render() {
      return(
          <div>   
            <button id="buttonId" className={ClassNameUtil.getClassNames("fbra_button", "fbra_test_button", "fbra_formItem__selectPaymentButton")} title="" name="selectPaymentButton">
                Continue to payment page
            </button>
          </div>
          <input type="hidden" name="CWToken" id="CWToken" />
        </div>
    );
  }
}

该脚本在第一次加载时工作正常，单击按钮我得到了模态并且流程完全工作正常，但我面临的问题是，当我在点击时回到同一个组件时后退按钮，此组件正在重新渲染，但脚本 onload 不起作用，这意味着单击按钮时模态未打开。

我知道我正在使用可能是一个原因的 buttonId。那么有什么方法可以让按钮在重新渲染组件时再次工作。

任何解决问题的帮助将不胜感激。

4

0 回答 0