谷歌 reCaptcha 在 React.js 中工作？

Question

我非常接近......加载元素很好，因为reCaptcha脚本的工作方式使得它在创建'g-recaptcha'类的实例时不会完成渲染. 所以。 如果我使用，reCaptcha 将加载（每次/功能正确）...

// the div that contains the reCaptcha is in < Contact / >
ReactDOM.render( < Contact / > , document.getElementById('non-header'));

// adding another recaptcha/api.js to the head
var imported = document.createElement('script');
imported.src = 'https://www.google.com/recaptcha/api.js';
document.head.appendChild(imported);

这显然是一个可怕的解决方案，因为每次加载“联系人”时都会将另一个脚本附加到头部。 不仅如此......我已经在初始文档的头部放置了一个 reCaptcha 脚本（这只是一遍又一遍地重新煽动它）。 使用库 API 并重置 reCaptcha 不起作用（见下文）...

ReactDOM.render( < Contact / > , document.getElementById('non-header'));

//var imported = document.createElement('script');
//imported.src = 'https://www.google.com/recaptcha/api.js';
//document.head.appendChild(imported);

grecaptcha.reset();


74:2  error  'grecaptcha' is not defined  no-undef !!!

所以我需要以某种方式访问​​ React 中 reCaptcha div 的脚本方法。 Contact.js 是一个非常基础的 React 组件。 也可能只是……

import React, { Component } from 'react';
import './css/Contact.css';

class Contact extends Component {
    render() {
        return (
            <div className='g-recaptcha' id='recaptcha' data-sitekey='******************************'></div>
        );
    }
}

如果有人可以为我提供一些指导，那么即使只是了解在 React 组件中包含 3rd 方脚本的正确方法也会有很大帮助。

这似乎是在正确的道路上（链接： https : //discuss.reactjs.org/t/using-external-script-libraries/2256 ）？

Answer 1

您可以使用https://github.com/appleboy/react-recaptcha

这个库工作正常。 这是用法：

<Recaptcha sitekey="" 
    render="explicit" 
    hl={"ja"} 
    onloadCallback={} 
    verifyCallback={*} />

Answer 2

对于那些希望使用此线程并且不想使用第三方库的人，我想出了一个自动加载ReCaptcha组件，没有第三方依赖项，希望对您有所帮助

要旨：

https://gist.github.com/ivansnek/8b69055ddef6b6a43769ed95bd7360f8

CodeSandbox：

https://codesandbox.io/embed/ Patient-shape-k8r1l？fontsize = 14