JS 代码在我将其粘贴到控制台时有效，但在我的 React 应用程序中不起作用

Posted 2023-02-22

【中文标题】JS 代码在我将其粘贴到控制台时有效，但在我的 React 应用程序中不起作用

【英文标题】：JS code works when i paste it on console, but does not work inside my React App

【发布时间】：2021-12-07 08:34:42

【问题描述】：

好的，代码如下：

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 应用程序中，它会运行，将脚本标签添加到文档的头部，然后什么也不会发生。表单未创建，我的 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 标签和其中创建的内容。

【问题讨论】：

请直接在您的问题中添加您的代码。为什么要粘贴到外部网站，并添加链接？

觉得太长了，好吧我现在编辑直接发帖。

没关系，我冒昧地用它制作了一个可运行的sn-p :)

现在问题（可以这么说）是，您提供的代码有效。我知道当您将此代码放入您的 React 应用程序时，它什么也不做，但我没有 React 应用程序来测试它（我什至不是 React 开发人员）所以我不确定如何重现您的问题.控制台有错误吗？

大概<div id="iyzipay-checkout-form"></div> 是 React 正在重新渲染的组件的一部分。我在这里没有看到那个元素，也没有看到它的id，所以听起来这个第 3 方工具正在处理这个问题。如果是这种情况，并且如果该第 3 方没有 React 支持（也没有任何其他第 3 方添加了您可以找到的此类支持），那么您可能需要创建自己的 React 包装器组件来重新初始化此功能它呈现，这可能涉及对这个第 3 方功能的一些挖掘。

【参考方案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"  />
        <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;

【讨论】：

你可能想清理一下，这是来自一个干净的 react-app 项目。您还应该将 MyComp 组件重写为钩子，但这应该会给您一个很好的起点。