web-dev-qa-db-fra.com

Google reCaptcha pour travailler dans React.js?

Je me rapproche tellement ... le chargement de l'élément est correct, SAUF pour le fait que le script reCaptcha fonctionne de manière à rendre le rendu inutile lorsque vous créez une instance de la classe 'g-recaptcha' . ALORS. Le reCaptcha chargera (à chaque fois/fonctionnellement correct) si j'utilise ...

// 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);

C'est clairement une solution épouvantable car à chaque fois que 'Contact' est chargé, un autre script est ajouté à la tête. Non seulement cela ... il y a déjà un script reCaptcha que j'ai mis en tête dans le document initial (il s'agit simplement de le ré-instiguer encore et encore). L'utilisation de l'API des bibliothèques et la réinitialisation de reCaptcha ne fonctionnent pas (voir ci-dessous) ...

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

J'ai donc besoin d'accéder aux méthodes de script pour reCaptcha dans React. Contact.js est un composant React extrêmement basique. Cela peut aussi bien être juste ...

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

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

Peut-être même que simplement avoir une idée de la bonne façon d’inclure des scripts tiers dans un composant React aiderait beaucoup si quelqu'un pouvait me fournir des conseils.

Cela semble-t-il être sur la bonne piste (lien: https://discuss.reactjs.org/t/using-external-script-libraries/2256 )?

javascriptreactjsrecaptcha
8
jscul

Vous pouvez utiliser https://github.com/appleboy/react-recaptcha

liblary fonctionne bien 

usage:

<Recaptcha sitekey="" 
    render="explicit" 
    hl={"ja"} 
    onloadCallback={} 
    verifyCallback={*} />
0
Vahap Gençdal