React本地网站集成Cloudflare Turnstile验证码不显示问题求助

1. 修正React属性写法 #

React中需统一使用className替代原生class属性，你代码里外层的<div class="checkbox mb-3">要改成<div className="checkbox mb-3">，避免样式或渲染异常。

2. 替换为真实有效的Site Key #

当前代码里data-sitekey="sitekey"是占位符，必须替换成Cloudflare控制台生成的真实站点密钥，否则验证码无法正常加载。

3. 配置本地开发域名权限 #

Cloudflare Turnstile默认仅允许已配置的域名加载验证码，需在Cloudflare控制台的Turnstile设置中，将本地开发地址（如localhost:3000）添加到允许的域名列表，否则本地环境下验证码会被拦截。

4. 改用React友好的脚本加载与初始化方式 #

直接在组件的HTML结构中写<script>标签，可能因React渲染机制导致脚本加载时机不匹配，推荐在组件挂载时动态加载脚本并手动初始化：

import { useEffect, useRef } from 'react';

function SignupPage() {
  const turnstileContainer = useRef(null);

  useEffect(() => {
    // 动态创建并加载Turnstile脚本
    const script = document.createElement('script');
    script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
    script.async = true;
    script.defer = true;
    document.body.appendChild(script);

    // 脚本加载完成后初始化验证码
    script.onload = () => {
      if (window.turnstile && turnstileContainer.current) {
        window.turnstile.render(turnstileContainer.current, {
          sitekey: '你的真实Site Key',
          callback: (token) => {
            // 验证成功后处理token，比如存入组件状态
            console.log('验证token:', token);
          },
        });
      }
    };

    // 组件卸载时清理资源
    return () => {
      document.body.removeChild(script);
      if (window.turnstile && turnstileContainer.current) {
        window.turnstile.remove(turnstileContainer.current);
      }
    };
  }, []);

  // 其他组件逻辑保持不变...

  return (
    // 替换原Turnstile容器为带ref的空div
    <div className="checkbox mb-3">
      <div ref={turnstileContainer}></div>
    </div>
  );
}

5. 查看浏览器控制台错误信息 #

打开浏览器开发者工具的控制台，检查是否存在加载失败提示（如Site Key无效、域名未授权、脚本加载失败等），这些信息会直接定位问题根源。

6. 避免严格模式下的重复初始化 #

若React应用开启了严格模式（StrictMode），可能导致脚本重复加载引发初始化异常，可暂时关闭严格模式测试，或在初始化时判断验证码是否已渲染。

内容的提问来源于stack exchange，提问作者MaxxABillion