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

这显然是一个可怕的解决方案，因为每次加载“Contact”时，另一个脚本都会附加到头部。不仅如此……我在初始文档的头部已经有一个 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 组件中包含 3rd 方脚本的正确方法也会有很大帮助。

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