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: "email@email.com",
  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 应用程序中，它会运行，将脚本标签添加到文档的头部，然后什么也不会发生。表单未创建，我的 id 为“iyzipay-checkout-form”的 div 为空。

为什么？我疯了，两天都想不通。

也应该提到这一点：如果我创建一个独立的 index.html，将此代码放在文档头部的脚本标记中，然后只需添加一个 id 为“iyzipay-checkout-form”的 div，这确实会创建该html页面上的表单。因此，该代码仅在 react 内部不起作用。

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

在您看到的页面上，即使有创建它的代码，您也不会看到该表单，但是如果您打开操场的控制台，并粘贴我在顶部给出的相同“代码”这个问题，表格就会出现。您也可以右键单击检查，以查看 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: "email@email.com",
          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;