JS代码工作时，我粘贴到控制台，但不工作在我的React应用程序

Question

好的，这就是代码:

var iyziInit = {
currency: "TRY",
token: "23bfa27a-172a-493d-b42f-8b091589eaa0",
price: 2.4,
locale: "tr",
baseUrl: "https://sandbox-api.iyzipay.com",
merchantGatewayBaseUrl: "https://sandbox-merchantgw.iyzipay.com",
registerCardEnabled: true,
bkmEnabled: true,
bankTransferEnabled: false,
bankTransferRedirectUrl: "https://localhost:3000/callback",
bankTransferCustomUIProps: {},
campaignEnabled: false,
creditCardEnabled: true,
bankTransferAccounts: [],
userCards: [],
fundEnabled: true,
memberCheckoutOtpData: {},
force3Ds: false,
isSandbox: true,
storeNewCardEnabled: true,
paymentWithNewCardEnabled: true,
enabledApmTypes: ["SOFORT", "IDEAL", "QIWI", "GIROPAY"],
payWithIyzicoUsed: false,
payWithIyzicoEnabled: true,
payWithIyzicoCustomUI: {},
buyerName: "John",
buyerSurname: "Doe",
merchantInfo: "",
cancelUrl: "",
buyerProtectionEnabled: false,
hide3DS: false,
gsmNumber: "",
email: "[e-mail]",
checkConsumerDetail: {},
subscriptionPaymentEnabled: false,
ucsEnabled: false,
fingerprintEnabled: false,
payWithIyzicoFirstTab: false,
metadata: {},
createTag: function() {
var iyziJSTag = document.createElement("script");
iyziJSTag.setAttribute(
"src",
"https://sandbox-static.iyzipay.com/checkoutform/v2/bundle.js?v=1634688058781"
);
document.head.appendChild(iyziJSTag);
},
};
iyziInit.createTag();

这段代码，在<div id="iyzipay-checkout-form"></div>中创建了一个完整的支付表单。

我不能把它作为正常的反应代码，因为它来自支付网关提供商的api。该脚本需要运行并直接将这些元素添加到dom中。

问题在这里:

如果我将这段代码粘贴到浏览器的控制台，它就会运行，将脚本标记添加到文档的头部，然后在div中创建我的表单。我可以看到表单。

然而，如果我把这段代码放在我的react应用程序中，它会运行，将脚本标签添加到文档的头部，然后什么也没发生。表单没有创建，我的div id为"iyzipay-checkout-form"是空的。

为什么?我快疯了，整整两天都想不明白这件事。

也应该提到这一点:如果我创建一个独立的index.html，将此代码放在文档头部的script标签中，然后添加一个id为"iyzipay-checkout-form"的div，这将在该html页面上创建表单。所以这些代码在react中不起作用

你可以在React Playground上测试:https://codesandbox.io/s/react-playground-forked-4ht85

在你看到的页面上，即使有创建表单的代码，你也看不到表单，但是如果你打开游乐场的控制台，并粘贴相同的"代码"在这个问题的上面，表格就会出现。你也可以右键单击inspect，查看head标签和它里面创建的东西。

Answer 1

所以问题是由iyziInit.createTag();注入的脚本期望iyziInit变量在全局作用域(附加到窗口)中定义。

下面是一个有效的例子，显示了这个表单。

import logo from "./logo.svg";
import "./App.css";
import { useEffect, useState } from "react";
function MyComp() {
const [, setCalled] = useState(false);
useEffect(() => {
setCalled(called => {
if (!called) {
window.iyziInit = {
currency: "TRY",
token: "23bfa27a-172a-493d-b42f-8b091589eaa0",
price: 2.4,
locale: "tr",
baseUrl: "https://sandbox-api.iyzipay.com",
merchantGatewayBaseUrl: "https://sandbox-merchantgw.iyzipay.com",
registerCardEnabled: true,
bkmEnabled: true,
bankTransferEnabled: false,
bankTransferRedirectUrl: "https://localhost:3000/callback",
bankTransferCustomUIProps: {},
campaignEnabled: false,
creditCardEnabled: true,
bankTransferAccounts: [],
userCards: [],
fundEnabled: true,
memberCheckoutOtpData: {},
force3Ds: false,
isSandbox: true,
storeNewCardEnabled: true,
paymentWithNewCardEnabled: true,
enabledApmTypes: ["SOFORT", "IDEAL", "QIWI", "GIROPAY"],
payWithIyzicoUsed: false,
payWithIyzicoEnabled: true,
payWithIyzicoCustomUI: {},
buyerName: "John",
buyerSurname: "Doe",
merchantInfo: "",
cancelUrl: "",
buyerProtectionEnabled: false,
hide3DS: false,
gsmNumber: "",
email: "[e-mail]",
checkConsumerDetail: {},
subscriptionPaymentEnabled: false,
ucsEnabled: false,
fingerprintEnabled: false,
payWithIyzicoFirstTab: false,
metadata: {},
createTag: function() {
var iyziJSTag = document.createElement("script");
iyziJSTag.setAttribute(
"src",
"https://sandbox-static.iyzipay.com/checkoutform/v2/bundle.js?v=1634688058781"
);
document.head.appendChild(iyziJSTag);
}
};
window.iyziInit.createTag();
return true;
}
});
return () => delete window.iyziInit;
}, []);
return <></>;
}
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<MyComp />
</div>
);
}
export default App;