第三方脚本无法在React组件中始终找到具有特定ID的按钮

Question

我正在创建一个包含第三方（NMI）来收集付款信息的Web应用程序。 NMI提供的脚本可以完成所有工作，只需添加一个ID为'payButton'的html按钮，然后单击该按钮，便会弹出一个对话框，以收集抄送信息。

以下是我能够使其正常工作的唯一情况。

<html lang="en">
  <head>

    <!-- Other imports -->

    <!--
      NMI Collect.js script
    -->
    <script src="https://secure.networkmerchants.com/token/Collect.js" data-tokenization-key="security_key"></script>

    <title>React App</title>
  </head>
  <body></body>
</html>

class App extends Component {

    render() {
        return (
            <div>
                <button type="button" id="payButton">Pay $5</button>
            </div>
        )
    }
}

现在，上面的代码可以正常工作。 我可以单击该按钮，弹出窗口会像应有的那样打开，但是当我想根据组件的状态隐藏或显示该按钮时，弹出窗口将无法工作。 下面的代码是这种情况下不起作用。

class App extends Component {

    render() {
        const test = false

        let data
        if(test) {
            data = <div></div>
        } else {
            data = <button type="button" id="payButton">Pay $5</button>
        }

        return (
            <div>
                {data}
            </div>
        )
    }
}

Answer 1

该脚本最有可能在按钮上寻找并直接在其上添加一个侦听器。 这意味着，一旦某些状态发生变化将隐藏按钮，则该按钮将从DOM中删除，并且监听器也随之丢失。

您需要检查NMI api，以查看具有哪些选项。 如果有手动方式重新连接侦听器，则可以在组件更新且按钮再次显示时执行此操作。

第三方脚本无法在React组件中始终找到具有特定ID的按钮

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-09-14 04:53:59

第三方脚本无法在React组件中始终找到具有特定ID的按钮

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-09-14 04:53:59

解决方案1
1 已采纳 2019-09-14 04:53:59