Javascript 如何在react中使用外部对象？_Javascript_Html_Reactjs

Javascript 如何在react中使用外部对象？

javascript html reactjs

Javascript 如何在react中使用外部对象？,javascript,html,reactjs,Javascript,Html,Reactjs,第三方寄给我这个脚本。基本上包括脚本调用对象 onAuthorize将反馈数据，然后处理数据这是将it与react整合的一种方式吗？我想我需要来自onAuthorize的数据来更新我的反应状态 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, i

第三方寄给我这个脚本。基本上

包括脚本

调用对象

onAuthorize将反馈数据，然后处理数据

这是将it与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>


支付网关测试页面
iframe{边框：0；高度：50px；}
*小部件演示


//小部件
mywidget.Button.render({
客户：{
id:“1234”，
名称：“测试我”
},
支付：职能（行动）{
var amountValue=parseFloat（document.getElementById（“inp amount”）.innerText）；
返回操作.createQuote（amountValue）
},
onAuthorize:函数（数据）{
//错误
if（data.errorCode）{
这是一个错误（数据）；
返回；
}
//我们需要付的钱
var amountValue=parseFloat（document.getElementById（“inp amount”）.innerText）；
//我们有这样的积分，换算成金钱
var pointsDollars=parseFloat（data.pointsBurned*0.005,10）；
//要转换的点
document.getElementById（'qp'）。innerText=data.pointsBurned；
//origPay-新钱=立即付款
document.getElementById（'bal'）.innerText='$'+（amountValue-pointsDollars）；
},
onError：函数（数据）{
控制台日志（数据）；
},
onClicked：函数（数据）{
//点击
控制台日志（数据）；
}
}，“#容器”）；//容器


结帐：1543美元

兑换积分：


应付余额：

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

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

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

类小部件扩展组件{
componentDidMount（）{
//这里的脚本
}
render（）{
返回(
);
}
}

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

在页面中添加事件（不一定在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});
}

从

onAuthorize

调用

setAuthorizeState

，您可能会对以下内容感兴趣：