Google reCaptcha, React.js'de çalışacak mı?

Question

Çok yaklaşıyorum ... öğenin yüklenmesi gayet iyi değil çünkü reCaptcha komut dosyasında bir şey yapmasını sağlıyor ki, 'g-recaptcha' örneğini oluşturduğunuzda işleme yapılmıyor ' sınıf. YANİ. 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); 

Bu açıkça kafa eklenen başka senaryo yüklendiğinde her zaman 'Bize' olarak korkunç bir çözümdür ... Ben kullanırsanız (her zaman/işlevsel doğru) yük EDECEKTİR. Sadece bu da değil ... zaten baştaki belgeye koyduğum bir reCaptcha betiği var (bu sadece tekrar tekrar başlatıyor). Ben Tepki içinde ReCaptcha div için komut dosyası yöntemlerine erişmek için gereken Yani bir şekilde ...

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

kütüphaneler API kullanarak ve ReCaptcha (aşağıya bakınız) çalışmıyor sıfırlama. Contact.js inanılmaz derecede temel bir React bileşenidir. O da sadece

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

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

Hatta belki sadece herkes bana bazı rehberlik sağlayabilir eğer çok yardımcı olacak bir tepki bileşeni'nde 3. parti komut dosyalarını içerecek şekilde uygun bir şekilde bir fikir almak ... olabilir.

Bu doğru yolda görünüyor mu (link: https://discuss.reactjs.org/t/using-external-script-libraries/2256)?

Answer 1

Sen iyi

kullanım çalışan https://github.com/appleboy/react-recaptcha

liblary kullanabilirsiniz:

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