我正在尝试使用React添加paypal按钮。
根据paypal开发指南，我需要包含
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>
在index.html标签中的<head></head>中，然后使用
import React from "react";
import ReactDOM from "react-dom"
const PayPalButton = paypal.Buttons.driver("react", { React, ReactDOM });
function YourComponent() {
const createOrder = (data, actions) => {
return actions.order.create({
purchase_units: [
{
amount: {
value: "0.01",
},
},
],
});
};
const onApprove = (data, actions) => {
return actions.order.capture();
};
return (
<PayPalButton
createOrder={(data, actions) => createOrder(data, actions)}
onApprove={(data, actions) => onApprove(data, actions)}
/>
);
}
然而const PayPalButton = paypal.Buttons.driver("react", {React, ReactDOM});
行抛出错误
'paypal' is not defined no-undef
如果从外部<script>包含的对象没有加载。我怎么能从外部<script>加载加载对象到React组件呢?
有两种方法可以解决这个问题:
const PayPalButton = window.paypal.Buttons.driver("react", { React, ReactDOM });
请记住，在Javascript中全局变量也是全局对象的属性(在浏览器中是window)。实际上，我喜欢对全局变量这样做，因为它在代码中很清楚地表明这个东西是一个全局变量，而不是阅读它并问"WTF where did that come from?">
你也可以(假设ESLint)直接抑制lint警告(不推荐):
// eslint-disable-line no-undef
const PayPalButton = paypal.Buttons.driver("react", { React, ReactDOM });