我目前正在为一个本地 React 网站开发一个登录页面，我正在尝试集成 Cloudflare 十字转门，但我遇到了它没有出现在页面上的问题。我按照文档并在我的代码中添加了以下代码行：
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
和
<div class="cf-turnstile" data-sitekey=“<YOUR_SITE_KEY>"></div>
然而，闸机还是没有出现。以下是我目前正在使用的代码：
<html lang="en">
<head>
<title>Signup</title>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
</head>
<body>
<div className="mobilelogo">
<img src={mobileLogo} alt=""/>
<span className="headingStyle"> News API</span>
</div>
<div className="parentClass">
<div className="mobilemode">
<div className="logostyle">
<img src={SignUpLogo} alt=""/>
<span className="headingStyle">News API</span>
</div>
<div className="divsection">
<span className="headingStyle" onClick={()=>setOpen(true)}>Create an account</span>
<span className="subheadingStyle">Sign up to continue </span>
<div className="inputBox">
<span className="labelHeading">Name</span>
<div >
<TextField inputProps={{ style: { marginLeft: '30px' } }} value={name} onChange={handleNameChange} id="outlined-basic" label="Name" variant="outlined" />
{nameError && <span className="error">{nameError}</span>}
</div>
</div>
<div className="inputBox">
<span className="labelHeading">Email</span>
<div >
<TextField inputProps={{ style: { marginLeft: '30px' } }} value={email}onChange={handleEmailChange} id="outlined-basic" label="Email" variant="outlined" />
{emailError && <span className="error">{emailError}</span>}
</div>
</div>
<div className="inputBox">
<span className="labelHeading">Password</span>
<div >
<TextField inputProps={{ style: { marginLeft: '30px' } }} value={password} onChange={handlePasswordChange} type="password"id="outlined-basic" label="Password" variant="outlined" />
{passwordError && <span className="error">{passwordError}</span>}
</div>
</div>
<div class="checkbox mb-3">
<div className="cf-turnstile" data-sitekey="sitekey"></div>
</div>
<div>
<button className="buttonClass" onClick={()=> validationFunc()}><span className="buttonClassText">Create an account</span></button>
</div>
</div>
</div>
<div className="desktopMode">
<img src={RightCardImage} alt=""/>
</div>
</div>
</body>
</html>
<SnackbarFile open={open} setOpen={setOpen} msg ={globalmsg}/>
</>
)
}