Question

第三方向我发送了此脚本。基本上，

包括脚本
调用对象
onAuthorize将反馈数据，然后对数据进行处理

这是一种将它与react集成在一起的方法吗？我想我需要来自onAuthorize的数据来更新我的反应状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>Payment Gateway Test Page</title>
    <script src="https://service.com/widget.js">
    </script>
    <style type="text/css">
        iframe{border: 0;height: 50px;}
    </style>
</head>

<body>
<div>
    * Demo for widget
</div>
<br/>
<script>
    // widget
    mywidget.Button.render({
        Client: {
            id: "1234",
            name: "testme"
        },
        payment: function (actions) {
            var amountValue = parseFloat(document.getElementById("inp-amount").innerText);
            return actions.createQuote(amountValue)
        },
        onAuthorize: function (data) {
            // err
            if (data.errorCode) {
                this.onError(data);
                return;
            }

            // money we need to pay
            var amountValue = parseFloat(document.getElementById("inp-amount").innerText);
            // we have such points, converted to money
            var pointsDollars = parseFloat(data.pointsBurned * 0.005, 10);

            // points to convert
            document.getElementById('qp').innerText = data.pointsBurned;

            // origPay - new_money = pay_now
            document.getElementById('bal').innerText = '$' + (amountValue - pointsDollars);
        },
        onError: function (data) {
            console.log(data);
        },
        onClicked: function (data) {
            // on click
            console.log(data);
        }
    }, "#container"); // container
</script>

<div id="container"></div>
<br/>
<div id="amount">
    Checkout: $<span id="inp-amount">1543</span> <br>
    Points to redeem: <span id="qp"></span> <br>

    <hr>
    Balance to pay: <span id="bal"></span> <br>
</div>
</body>

</html>

Answer 1

您可以创建一个事件并监听该事件。在onAuthorize中，您可以触发事件并传递数据。

在页面中添加事件（不一定在React中）

// Create the event
var event = new CustomEvent("authroize-me", { "detail": "some event info" });

反应组件

 constructor() {
   super();
   this.handleAuthroizeMe = this.handleAuthroizeMe.bind(this);       
}
handleAuthroizeMe(data) {
   console.log(data);
}

componentDidMount() {
    document.addEventListener('authroize-me', this.handleAuthroizeMe);
 }
 componentWillUnmount() {
   document.removeEventListener("authroize-me", this.handleAuthroizeMe);
}

在onAuthorize中

onAuthorize: function (data) {
   // Dispatch event
   document.dispatchEvent(event, data);
}

另一种快速而肮脏的修复程序。

在react范围之外公开来自react组件的函数。

window.setAuthorizeState = (data)=> {
  this.setState({authorizeState: data});
}

从setAuthorizeState呼叫onAuthorize

Answer 2

可以将代码嵌入呈现容器的组件中。并可以在componentDidMount中放置脚本。

class Widget extends Component {
  componentDidMount() {
    // script here
  }

  render() {
    return (
      <div id="container" />
    );
  }
}

如何在反应中使用外部对象？

2 个答案: