谷歌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组件中包含第三方脚本的正确方法,如果有人能为我提供一些指导,那将会有很大帮助.

这似乎是在正确的轨道上(链接: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={*} />