如何在 React JS 的脚本标签中获取函数？

Question

我在 react js 中使用标签脚本有困难。我正在尝试使用在线支付 API。使用 API 的第一条指令是使用：

 <script src="https://assets.pagseguro.com.br/checkout-sdk-js/rc/dist/browser/pagseguro.min.js"></script>

根据API参考，下一步是：

• 包含 JavaScript 后，您必须配置函数调用 PagSeguro.encryptCard()，在 publicKey 参数中传递您的公钥。

var card = PagSeguro.encryptCard({
  publicKey: "MY_PUBLIC_KEY",
  holder: "First name Last name",
  number: "4242424242424242",
  expMonth: "12",
  expYear: "2030",
  securityCode: "123"
});

var encrypted = card.encryptedCard;

我的问题是由于 PagSeguro.encryptCard() 部分造成的。 PagSeguro 未定义。如何提取脚本中的PagSeguro和encryptCard()？

我正在使用下面的代码：

import React, {useEffect, useState} from 'react'

function Pay(){   

  const  [Infor, setInfor]=useState();

     useEffect(() => {
        
        const script = document.createElement('script');
      
        script.src = 'https://assets.pagseguro.com.br/checkout-sdk-js/rc/dist/browser/pagseguro.min.js';
        script.async = true;
         script.onload = (function(){ 
        setInfor(script);
       }) 
        console.log('script',script)
       
      const container = document.getElementById("mydiv"); 
      container.appendChild(script); 
       
      let card = script.PagSeguro.encryptCard({
        publicKey: "MINHA_CHAVE_PUBLICA",
        holder: "Nome Sobrenome",
        number: "4242424242424242",
        expMonth: "12",
        expYear: "2030",
        securityCode: "123"
      });
       console.log('card',card)             
      }, []);

  
return (
    <div id="mydiv">
     
<h1>Payment</h1>

</div>
);

}
export default Pay

这是错误信息。 TypeError: Cannot read properties of undefined (reading 'encryptCard')

Answer 1

听起来您在代码之后 包含了外部脚本 - 正如您引用的 API 参考所说：

在包括JavaScript之后你必须配置函数调用...

您需要您的代码如下所示：

<script src="https://assets.pagseguro.com.br/checkout-sdk-js/rc/dist/browser/pagseguro.min.js"></script>
<script>
// Now, PagSeguro will have loaded
console.log(typeof PagSeguro);

// and you can proceed to use it

var card = PagSeguro.encryptCard({
  publicKey: "MY_PUBLIC_KEY",
  holder: "First name Last name",
  number: "4242424242424242",
  expMonth: "12",
  expYear: "2030",
  securityCode: "123"
});

var encrypted = card.encryptedCard;
</script>

如果您不想在脚本下载时阻止渲染，您可以将load 事件侦听器附加到脚本，并为其指定async 或defer 属性。