如何在 reactjs 的公共 html 文件中创建一个条件外部脚本引用，即一个用于生产，一个用于暂存

Question

如何在 reactjs 中的公共 html 文件中编写条件外部脚本引用的脚本。

<script>
var element=document.createElement('script');
if (env.test) {
element.setAttribute('src', 'https://pay-sandbox.gocardless.com/js/beta');
} else {
element.setAttribute('src', 'https://pay.gocardless.com/js/beta');
}
document.getElementById("...").appendChild(element);
</script>

在想类似上面的事情，但不知道如何从这里访问环境变量。

<script>
var element=document.createElement('script');
if (env.test) {
element.setAttribute('src', 'https://pay-sandbox.com/js/beta');
} else {
element.setAttribute('src', 'https://pay.com/js/beta');
}
document.getElementById("...").appendChild(element);
</script>

Answer 1

您可以添加一个自定义钩子，该钩子在 App 组件中动态加载脚本，而不是在index.html文件中。

import React, { useState, useEffect } from 'react';
import { render } from 'react-dom';
interface AppProps { }

const App:  React.FC<AppProps> = ({}) => {
const [hasScriptLoaded, setLoadedStatus] = useState(false);
const isDev = true; // Set this boolean by reading your env here
const src = isDev ? 'https://pay-sandbox.gocardless.com/js/beta' : 
'https://pay.gocardless.com/js/beta';
useEffect(
() => {
// Create script
let script = document.createElement('script');
script.src = src;
script.async = true;
// Event listener for when script is loaded
const onScriptLoad = () => {
setLoadedStatus(true);
};
// Attach event listener to script
script.addEventListener('load', onScriptLoad);
document.body.appendChild(script);
// Clean up
return () => {
script.removeEventListener('load', onScriptLoad);
};
},[src])
return (
<div>
<p>
Start editing to see some magic happen :)
{hasScriptLoaded && <div>Script has been loaded</div>}
</p>
</div>
);
}
render(<App />, document.getElementById('root'));

你可以在这个堆栈闪电战中玩。在 StackBlitz 中检查浏览器中加载的脚本，并检查脚本是否根据isDev变量呈现。您可以改为根据环境设置isDev变量。