2

我正在创建一个包含第三方 (NMI) 以收集付款信息的 Web 应用程序。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>
        )
    }
}
4

1 回答 1

3

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

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

于 2019-09-14T04:53:59.963 回答