运行 React组件内的lib回调函数

Question

我正在尝试将 React 与支付网关集成。

付款有自己的库，因此，我将库包含在 index.html 文件的 head 标签中

 <script src="url.js" data-error="errorCallback"
    data-cancel="cancelCallback" data-complete="completeCallback" data-timeout="timeoutCallback">
</script>

然后我这样调用回调函数：

<script type="text/javascript">
    function errorCallback(error) {
      console.log(JSON.stringify(error));
    }
    function cancelCallback() {
      console.log('Payment cancelled');
    }
    function completeCallback() {
      console.log('Payment complete');
    }
    function timeoutCallback() {
      console.log("Timeout")
    }
  </script>

我的问题是，如何在 React 组件中调用这 4 个函数？我想在 completeCallback 触发时显示一个成功的对话框。

有什么帮助吗？

Answer 1

您可以使用自定义事件从这些方法中监听 activity。从这些方法创建和分派它们，并在您的 React 组件中为它们添加侦听器。

在你的index.html中：

<script type="text/javascript">
    function errorCallback(error) {
      const errorCallbackUrl = new CreateEvent('errorCallbackUrl', {detail: 'yourdata'});
      window.dispatchEvent(errorCallbackUrl)
      console.log(JSON.stringify(error));
    }
  </script>

在你的反应组件中像这样绑定它们：

   window.addEventListener('errorCallbackUrl', (data) => {
        // do something in your component
        // call methods/update state
        alert(JSON.stringify(data));
})

同样的，你可以从组件向后跟着index.html做同样的事情来调用任何方法。

运行 React组件内的lib回调函数

Run lib callback function inside react component

javascript

jsx

node.js

reactjs

react-helmet