javascript - 如何将 ReactJS 函数作为回调传递给外部 JS 函数？

Question

我正在 ReactJS 中使用使用 iframe 的第三方银行 JS 实现信用卡付款表单。

逻辑是我在页面中加载银行的 javascript，如下所示:

<script src="https://my-bank.com/super-secure-script.js"></script>

然后我在 ReactJS 组件中收集用户的 CC 数据，然后调用如下函数:

window.Bank.SendPayment(CC, this.paymentCompletedCallback);

 ...

paymentCompletedCallback = (result) => {
  // process payment result here, inside my component
}

问题是:super-secure-script.js 中的代码找不到回调 this. paymentCompletedCallback，因为它位于我的组件内部。

问题是:如何将对 React 对象函数的引用传递给外部脚本？

Answer 1

您可以将函数附加到 window 对象:

const Component = () => {

  const func = () => {
    console.log('do something');
  };

  window.func = func;
};