Javascript React中的脚本加载问题

我在react代码中使用了一个外部脚本。我写了下面的代码供您理解-

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

import React，{Component，PropTypes}来自'React'；
导出默认类GetIframe扩展组件{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
此.configureExternalScript（）；
}
配置外部脚本（）{
var getscript=document.createElement（“脚本”）；//创建脚本DOM节点
getscript.src=；//将其src设置为提供的URL
document.head.appendChild（getscript）；
getscript.onload=函数（）{
if（）{
.SetProperties(
{
“电子邮件”：，
“图像”：，
“按钮标签”：，
“货币”：，
“金额”：，
“郎”：，
“表格id”：“商业表格”，
“自动提交”：“真”
}
);
塞斯特尔先生(
{
“背景色”：“ffffff”，
“按钮颜色”：“555555”，
“纽扣颜色”：“777777”，
“buttonTextColor”：“ffffff”，
“ButtonExtHoverColor”：“ffffff”，
“inputBackgroundColor”：“ffffff”，
“inputTextColor”：“767676”，
“inputErrorColor”：“ff0000”，
“inputAddonBackgroundColor”：“ffffff”，
“labelColor”：“494949”
}
);
.AddActionButton（“按钮”）；
.GetCustomToken（，）；
设IsModalopend=false；
让tokenCreated=false；
让tokenId=“0121223\u sdwds\u rtrt”；
让lastFour=“0002”；
.Bind（“打开的”），（）=>{
console.log（'opened'）；
IsModalopend=真；
});
.Bind（“收到通知”），（e）=>{
console.log（'NotificationReceived'，e）；
});
.Bind（“tokenCreated”，（e）=>{
tokenId=e.tokenId；
让cardBrand=“”；
让cardName=“”；
如果（e.Last4！=null&&e.Last4！=“null”）{
lastFour=e.Last4；
cardBrand=e.Brand；
cardName=e.名称；
}
});
.Bind（“闭合的”），（e）=>{
控制台日志（'closed'，e）；
});
.GetNotification（（e）=>{
console.log（'getNotification'，e）；
})
}
}
}
render（）{
返回(
继续进入付款页面
);
}
}

这个脚本在第一次加载时运行良好，点击按钮我得到了模态，流程完全正常，但我面临的问题是，当我点击“上一步”按钮返回到同一个组件时，这个组件正在重新渲染，但脚本onload不起作用，表示单击按钮时，模式未打开

我知道我在用按钮，这可能是个原因。那么，有没有办法让按钮再次单击以重新渲染组件

---

如果您能帮助解决此问题，我们将不胜感激。

脚本是否每次都添加到

中？是的，它添加了@nivendhaIn在添加脚本的情况下，

onload

功能将被触发，因此根据您所说的内容而不是ID，尝试使用react

ref

引用

，你是说我需要在按钮标签中使用ref而不是ID。。你能把语法写在这里的注释@nivendha吗