Сторонний скрипт не всегда находит кнопку с определенным идентификатором в компоненте реакции

Я создаю веб-приложение, которое включает третью сторону (NMI) для сбора платежной информации. Сценарий, который предоставляет NMI, выполняет всю работу, все, что нужно сделать, это добавить html-кнопку с идентификатором «payButton», и при нажатии этой кнопки появляется всплывающее окно для сбора информации о CC.

Ниже приведена единственная ситуация, в которой я могу заставить ее работать.

<html lang="en">
  <head>

    <!-- Other imports -->

    <!--
      NMI Collect.js script
    -->
    <script src="https://secure.networkmerchants.com/token/Collect.js" data-tokenization-key="security_key"></script>

    <title>React App</title>
  </head>
  <body></body>
</html>

class App extends Component {

    render() {
        return (
            <div>
                <button type="button" id="payButton">Pay $5</button>
            </div>
        )
    }
}

Теперь приведенный выше код работает нормально. Я могу нажать кнопку, и всплывающее окно откроется, как и должно быть, но когда я хочу скрыть или показать кнопку в зависимости от состояния компонента, всплывающее окно не работает. В приведенном ниже коде эта ситуация не работает.

class App extends Component {

    render() {
        const test = false

        let data
        if(test) {
            data = <div></div>
        } else {
            data = <button type="button" id="payButton">Pay $5</button>
        }

        return (
            <div>
                {data}
            </div>
        )
    }
}

reactjs javascript react-dom jsx nmi-payments
person user2569905    schedule 14.09.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Скрипт, скорее всего, ищет кнопку и добавляет обработчик прямо на нее. Это означает, что как только изменится какое-то состояние, скрывающее кнопку, она будет удалена из DOM, а слушатель пропадет вместе с ней.

Вам нужно будет проверить API NMI, чтобы узнать, какие у вас есть варианты. Если есть ручной способ повторного подключения прослушивателя, вы можете делать это всякий раз, когда компонент обновляется и кнопка снова отображается.

person shadymoses    schedule 14.09.2019