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

Question

我正在创建一个包含第三方 (NMI) 的网络应用程序来收集付款信息。 NMI 提供的脚本完成了所有必须完成的工作，只需添加一个 ID 为 'payButton' 的 html 按钮，当单击该按钮时，会显示一个弹出窗口以收集 CC 信息。

以下是我能够让它工作的唯一情况。

<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 </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 </button>
        }

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

Answer 1

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

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

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

Third Party script not consistently find button with certain id in react component

javascript

reactjs

jsx

react-dom

nmi-payments