Google 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和重置驗證碼不起作用（見下文）...

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 !!! 

所以不知何故，我需要訪問的內無反應的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> 
     ); 
    } 
} 

甚至剛剛起步的正確方法的主意，包括在陣營組件第三方腳本將有很大的幫助，如果任何人都可以給我提供一些指導。

這個問題似乎是在正確的線索（鏈接：https://discuss.reactjs.org/t/using-external-script-libraries/2256）？

Answer 1

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

liblary做工精細

用法：

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