gpt4 book ai didi

javascript - 第三方脚本无法始终在 react 组件中找到具有特定 id 的按钮

转载 作者:行者123 更新时间:2023-12-02 22:57:09 25 4
gpt4 key购买 nike

我正在创建一个网络应用程序,其中包含第三方 (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>
)
}
}

最佳答案

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

您需要检查 NMI​​ api 以了解您有哪些选项。如果有手动方式重新附加监听器,则只要组件更新并且再次显示按钮,您就可以执行此操作。

关于javascript - 第三方脚本无法始终在 react 组件中找到具有特定 id 的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57931832/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com