仅在 React 应用程序的特定页面上显示 google Recaptcha V3 浮动广告

Question

我已经使用多个 # 路由和 google recaptcha v3 对应用程序做出反应，

我只想在登录和表单等特定页面（# route）上显示 recaptcha 浮动框。

如何实现。

尝试过 -

.grecaptcha-badge { 
    visibility: hidden;
}
#root #mainContainer .login:not(.empty) +  div>.grecaptcha-badge { 
    visibility: visible;
}

.grecaptcha-badge { 
    visibility: hidden;
}
#root #mainContainer .login ~ div>.grecaptcha-badge { 
    visibility: visible;
}

通过 javascript > componentWillMount -> 页面的 componentwillmount 调用在 google 重新验证呈现之前显示隐藏，因此它不会获取元素

Answer 1

我（和其他许多人一样）遇到了同样的问题。

在我的例子中，我使用 react-route 来监听路径变化。 所以我最终删除了我不需要的页面上的脚本和徽章元素，并将其添加（如有必要）在某些路径上。

const loadRecaptcha = () => {
    const script = document.createElement("script");

    script.src = "https://www.google.com/recaptcha/api.js?render=lalala";
    script.id = 'recaptcha-script';
    script.async = true;

    document.body.append(script);
}

const removeRecaptcha = () => {
    const script = document.getElementById('recaptcha-script');
    if (script) {
        script.remove();
    }

    const recaptchaElems = document.getElementsByClassName('grecaptcha-badge');
    if (recaptchaElems.length) {
        recaptchaElems[0].remove();
    }
}

希望对以后的人有所帮助

Answer 2

如果我们希望在您的 React 应用程序中有条件地删除 Google 的 reCAPTCHA。我们可以使用 CDM() 生命周期方法来：

1. 删除脚本
2. 删除 reCAPTCHA 徽章

我正在使用 react-google-recaptcha-v3，检查 GoogleReCaptchaProvider 的 class，我们可以找到 scriptId 和上面Ivan Yulin说的一样，完全一样

const script = document.querySelector(scriptId);
        if (script) {
            script.remove();
        }
        const recaptchaElems = document.getElementsByClassName('grecaptcha-badge');
        if (recaptchaElems.length) {
            recaptchaElems[0].remove();
        }

但是，即使删除了我在 DOM 中看到的脚本，脚本

<script id="google-recaptcha-v3" src="https://www.google.com/recaptcha/api.js?render=*********"></script>

我们怎样才能同时删除它？

Answer 3

在您的组件外声明：

const toggleCaptchaBadge = (show: boolean) => {
  const badge = document.getElementsByClassName('grecaptcha-badge')[0];
  if (badge && badge instanceof HTMLElement) {
    badge.style.visibility = show ? 'visible' : 'hidden';
  }
};

内部调用这个useEffect hook:

useEffect(() => {
    toggleCaptchaBadge(true);
    return () => toggleCaptchaBadge(false);
  }, []);