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

【问题标题】：Third Party script not consistently find button with certain id in react component第三方脚本无法始终在反应组件中找到具有特定 ID 的按钮
【发布时间】：2020-01-15 19:32:31
【问题描述】：

我正在创建一个包含第三方 (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 $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>
        )
    }
}

【问题讨论】：

标签： javascript reactjs jsx react-dom nmi-payments

【解决方案1】：

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

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

【讨论】：