Внешний js загружается в реагирующий компонент только после обновления - PullRequest
Новая
       26

Внешний js загружается в реагирующий компонент только после обновления

2 голосов
/ 02 ноября 2019

Мой компонент. 

import useScript from "./useScript";
function MyComponent(): JSX.Element {
useScript("https://dev-kpaymentgateway.kasikornbank.com/ui/v2/kinlinepayment.min.js", "pkey_test_20184OBD88Yvl6uplpR0kY0ZTpVz46h1Tdqyj");
return (
    <div className={greyContainer}>
        <div className={gridContainer}>

            <p id="error-summary">
                Oops something went wrong, please try again.
            </p>

            <div className="flied">
                <label className="label"> name</label>

                <div id="name"></div>
                <label> Name is invalid.</label>
            </div>

            <div className="flied">
                <label className=" label">Number</label>

                <div id="number"></div>
                <label>Number is invalid.</label>
            </div>

        </div>
        <div style={{textAlign: "right", marginBottom: 10, marginTop: 30}}>
            <form method="POST" action="https://httpbin.org/post">
                <button type="submit" className="pay-button">Pay now</button>
            </form>
        </div>

    </div>
);
}

Я загружаю скрипт, используя react hook. Предполагается, что этот скрипт добавляет какое-то поле в компонент выше. 

import { useEffect } from "react";

const useScript = (url, dataKey) => {
useEffect(() => {
    const script = document.createElement("script");

    script.src = url;
    script["data-key"] = dataKey;
    script["data-lang"] = "en";
    script["data-write-log"] = true;
    script.async = true;

    document.body.appendChild(script);

    return () => { document.body.removeChild(script);};
    }, [url]);
  };

  export default useScript;

Мой скрипт загружается, но только после обновления страницы, где я использовал компонент MyComponent. Я использую react-router5 для навигации.

Может кто-нибудь объяснить, почему это происходит и как его преодолеть.

1 Ответ

0 голосов
/ 02 ноября 2019

Я думаю, что сценарий kinlinepayment.min.js был выполнен очень хорошо. Но он регистрирует прослушиватель событий для события, которое уже произошло и больше не повторится: 

document.addEventListener("DOMContentLoaded",e())

Вы можете попытаться отправить это событие (и все события резервного копирования, если вам нужно поддерживать старые браузеры) в вашем useEffect: 

...
document.body.appendChild(script);

document.dispatchEvent(new Event('DOMContentLoaded')))

return ...
...