javascript - Google reCaptcha to work in React.js? - Stack Overflow

admin管理员组

文章数量:1295950

I'm getting so close... loading the element in is fine EXCEPT for the fact that something in the way the reCaptcha script works makes it so that rendering isn't done when you create an instance of the 'g-recaptcha' class. SO. The reCaptcha WILL load (every time/functionally correct) if I use...

// 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 = '.js';
document.head.appendChild(imported);

This is clearly a horrendous solution as every time 'Contact' is loaded another script is appended to the head. Not only that... there's already a reCaptcha script I put in the head in the initial document (this is just re-instigating it over and over). Using the libraries API and resetting the reCaptcha doesn't work (see below)...

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

//var imported = document.createElement('script');
//imported.src = '.js';
//document.head.appendChild(imported);

grecaptcha.reset();


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

So somehow I need to access the script methods for the reCaptcha div within React. Contact.js is an incredibly basic React ponent. It may as well just be...

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

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

Maybe even just getting an idea of the proper way to include 3rd party scripts in a React Component would help a lot if anyone can provide me some guidance.

Does this seem to be on the right trail (link: )?

I'm getting so close... loading the element in is fine EXCEPT for the fact that something in the way the reCaptcha script works makes it so that rendering isn't done when you create an instance of the 'g-recaptcha' class. SO. The reCaptcha WILL load (every time/functionally correct) if I use...

// 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./recaptcha/api.js';
document.head.appendChild(imported);

This is clearly a horrendous solution as every time 'Contact' is loaded another script is appended to the head. Not only that... there's already a reCaptcha script I put in the head in the initial document (this is just re-instigating it over and over). Using the libraries API and resetting the reCaptcha doesn't work (see below)...

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

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

grecaptcha.reset();


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

So somehow I need to access the script methods for the reCaptcha div within React. Contact.js is an incredibly basic React ponent. It may as well just be...

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

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

Maybe even just getting an idea of the proper way to include 3rd party scripts in a React Component would help a lot if anyone can provide me some guidance.

Does this seem to be on the right trail (link: https://discuss.reactjs/t/using-external-script-libraries/2256)?

• javascript
• reactjs
• recaptcha

Share Improve this question Follow edited Mar 1, 2017 at 11:01 jscul asked Mar 1, 2017 at 10:57 jsculjscul 77222 gold badges1010 silver badges2626 bronze badges 2

• 1 Not sure if this helps you out, but this ponent works out of the box: github./dozoisch/react-google-recaptcha – paqash Commented Mar 1, 2017 at 10:59
• 2 I was looking to use a GitHub project as an option, I've seen some good ones and got it working with: github./appleboy/react-recaptcha I think I'd prefer to get it working without though. I'm trying to learn React so I'm going to need to understand importing libraries eventually (or is that not a primary function of it). – jscul Commented Mar 1, 2017 at 11:08

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

You can use https://github./appleboy/react-recaptcha

This library works fine. Here's the usage:

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

本文标签： javascriptGoogle reCaptcha to work in ReactjsStack Overflow