请先通读全文再回答
所以我有一个香草javascript文件，我用它来尝试激活一个fetch请求每当一个按钮被按在一个单独的反应文件。这个普通的javascript文件不在src文件夹中，而react文件在src文件夹中。它位于index.html所在的公共文件夹中。出于这个目的，它需要留在那里。
Background.js:
function clickTest() {
fetch('https://connect.smartpathed.com/chrometest');
}
try {
document.getElementById("test-button").addEventListener('click', clickTest);
}
catch(e) {
function errorCatch() {
return;
}
}
React组件不会在这里列出，因为它有超过2000行代码，其中95%与这个问题无关。只要知道在渲染中有两个条件语句，以及我试图访问的返回语句中带有id的按钮。
我使用的react组件在渲染时被分成两个条件语句。在第一次加载时，上面的代码针对特定的id工作得很好，但是当它切换到另一个条件语句(加载时不呈现的语句)，并且我有一个具有相同id的类似按钮时(注意，这些是单独的测试，并且按钮在两种情况下只存在一次，因此没有id冲突)，没有来自document.getElementById()的输入，代码中断。如果我想在我的react文件中保持这个流，我知道我只会使用refs，但是上面的这个香草JavaScript文件需要作为一个单独的文件。
根目录下的index.html是这样的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Think. Future. Workforce. Connect.</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src = "background.js"></script>
<script src="https://apis.google.com/js/client.js"></script>
</body>
</html>
id为root的div代表react代码，然后JavaScript文件是添加在正文底部的background.js。那么如何获取条件语句中元素的id而不是加载页面时激活的元素呢?我试过把background.js放在组件的最后，但它仍然不起作用。是否有任何方法来激活后台js再次当条件在JavaScript组件内改变?
并没有真正的"运行文件" "打开浏览器后。<script>标记实际上表示"从这个url下载javascript并立即对其进行评估"。由于您的代码是在脚本的根目录中执行的，因此这是一次完成的操作。所有这些都发生在React初始化你的应用程序之前。
如果您希望能够等待并稍后调用它，则创建一个附加事件处理程序的函数。
function clickTest() {
fetch('https://connect.smartpathed.com/chrometest');
}
// would probably make more sense to pass the element or at
// least the selector in here
function addTestHandler() {
try {
document.getElementById("test-button").addEventListener('click', clickTest);
}
catch(e) {
function errorCatch() {
return;
}
}
}
useEffect(() => addTestHandler(), [])
我不得不说，在react应用程序的public文件夹中有javascript是可疑的，特别是因为你硬编码了react渲染的元素的id。