Question

我的组件。

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进行导航。

任何人都可以解释为什么会发生这种情况以及如何克服它。

Answer 1

我的最佳猜测是执行了kinlinepayment.min.js脚本。但是它为已发生但不会再次发生的事件注册一个事件侦听器：

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

您可以尝试在useEffect中调度该事件（如果需要支持旧的浏览器，还可以调度所有备份事件）：

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

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

return ...

外部JS仅在刷新后才在React组件中加载

1 个答案: