ReactJS -添加(Mollie)脚本以响应页面
ReactJS -添加(Mollie)脚本以响应页面
提问于 2022-01-01 16:11:13
我正在尝试导入一个名为Mollie的脚本(用于支付)，但我不知道如何在响应中做到这一点。通常在Javascript中，您会这样做：
<html>
<head>
<title>My Checkout</title>
</head>
<body>
<script src="https://js.mollie.com/v1/mollie.js"></script>
</body>
</html>我已经尝试过了(根据其他Stackoverflow帖子)
useEffect(() => {
const script = document.createElement("script");
script.src = "https://js.mollie.com/v1/mollie.js";
script.addEventListener("load", () => setScriptLoaded(true));
document.body.appendChild(script);
}, []);
const mollie = Mollie(); // Mollie is not defined但是，Mollie是未定义的。在如何应对import Mollie的问题上，有人能指出正确的方向吗？
我在跟踪本指南 (但这是标准的Javascript)
回答 2
Stack Overflow用户
发布于 2022-01-01 16:47:27
您可以从npmjs.com轻松地安装这个包，在那里您可以找到必要的文档和示例来开始。安装：
npm i @mollie/api-client
Stack Overflow用户
发布于 2022-01-01 17:25:21
这里的要点是，在将react组件挂载并呈现给用户之后，将调用该效果。在下一行中，您试图调用Mollie，实际上，当组件正在构建但尚未呈现时，将在此之前运行。
您可以采取多种方法来解决这个问题：
- 在index.html文件中导入脚本，就像为标准的非反应解决方案所做的一样。应该有一个“公共”文件夹，如果创建-反应-应用程序的使用或其他地方的情况下，自定义项目设置包含该文件。HTML应该以任何形式存在，即使它是在服务器端动态生成的情况下。以后可以在组件中或全局中创建mollie实例。
- 在React组件中使用多个效果:一个用于加载Mollie，另一个用于加载时使用它：
// MollieExample.jsx
const MollieExample = () => {
const [mollie, setMollie] = useState();
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://js.mollie.com/v1/mollie.js';
script.addEventListener("load", () => {
setMollie(window.Mollie(/* Mollie arguments */);
});
document.body.appendChild(script);
}, []);
useEffect(() => {
if (mollie) {
console.log('Mollie exists here');
console.log(typeof mollie);
}
} , [mollie]);
return <p>typeof mollie: {typeof mollie}</p>;
};- 如果通过自定义钩子使用全局共享Mollie实例，请使用动态脚本加载：
// useMollie.js
let molliePromise;
const useMollie = (effect, deps) => {
const [mollie, setMollie] = useState();
const mollieCb = useCallback((mollie) => effect(mollie), deps);
useEffect(() => {
if (!molliePromise) {
molliePromise = new Promise((resolve) => {
const script = document.createElement("script");
script.src = "https://js.mollie.com/v1/mollie.js";
script.addEventListener("load", () => {
resolve(window.Mollie(/* Mollie arguments */);
});
document.body.appendChild(script);
});
}
molliePromise.then((mollie) => setMollie(mollie));
}, []);
useEffect(() => {
if (mollie) {
mollieCb(mollie);
}
}, [mollie, mollieCb]);
};
// MollieConsumer.jsx
const MollieConsumer = () => {
useMollie((mollie) => {
console.log('Mollie exists here');
console.log(typeof mollie);
}, [/* useMollie effect callback dependencies array */]);
return (
<p>Mollie consumer</p>
);
};
// App.jsx
function App() {
/* Both consumers use the same instance of Mollie */
return (
<div>
<MollieConsumer/>
<MollieConsumer/>
</div>
);
}我想你最终会使用一些中间选项。例如，在index.html中导入脚本(或包含React应用程序主机元素的任何其他类型的HTML页面)和全局钩子。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70550102
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号