Как использовать внешний объект в реакции?

Третий участник отправил мне этот сценарий. В принципе,

  1. включить скрипт
  2. вызвать объект
  3. onAuthorize будет получать данные обратной связи, а затем делать что-то с данными

Это способ интегрировать его с реакцией? Я думаю, мне нужны данные от 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>

Всего 2 ответа

Автоматический диспенсер мыльной пены от xiaomi.


Вы можете создать событие и прослушать это событие. В onAuthorize вы можете инициировать событие и передавать данные.

Добавьте событие на свою страницу (не обязательно в «Реакт»)

// 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);
}

Еще одно быстрое и грязное исправление.

Выведите функцию из реагирующего компонента вне области действия.

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

Вызов setAuthorizeState с onAuthorize


Код может быть встроен в компонент, который отображает контейнер. А в компонентеDidMount скрипт может быть размещен.

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

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

Есть идеи?

10000