javascript - 仅在 React 应用程序的特定页面上显示 google Recaptcha V3 floater

Question

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

我只想在登录和表单等特定页面(# route)上显示 recaptcha float 框。

如何实现。

尝试过-

.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 -> 在 google recaptcha 呈现之前页面的 componentwillmount 调用，所以它不会获取元素

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();
    }
}

希望对以后的人有所帮助