在 React 组件中使用包含在全局 <script> 标签中的对象

Question

我正在尝试使用 React 添加 paypal button。

根据 paypals dev guide 我需要包括

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>

in <head></head> in index.html 标签然后使用

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 组件中呢？

Answer 1

圆的平方有两种方法：

const PayPalButton = window.paypal.Buttons.driver("react", { React, ReactDOM });

请记住，在 Javascript 中，全局变量也是全局对象的属性（window 在浏览器中）。我实际上喜欢为全局变量这样做，因为它在代码中非常清楚地表明这个东西是一个全局变量，而不是读取它然后去“WTF 那是从哪里来的？”。

您也可以（假设使用 ESLint）直接抑制 lint 警告（不推荐）：

// eslint-disable-line no-undef
const PayPalButton = paypal.Buttons.driver("react", { React, ReactDOM });

在 React 组件中使用包含在全局 <script> 标签中的对象

Use object included from global <script> tag inside React component

javascript

paypal

reactjs