Question

我变得如此接近......加载元素很好除了reCaptcha脚本工作方式的事实使得它在创建'g-的实例时不会完成渲染重新开始上课。所以。如果我使用的话，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>
        );
    }
}

如果有人能为我提供一些指导，或许只是想知道在反应组件中包含第三方脚本的正确方法会有很大帮助。

这似乎是在正确的轨道上（链接：https://discuss.reactjs.org/t/using-external-script-libraries/2256）？

Answer 1

您可以使用https://github.com/appleboy/react-recaptcha

liblary工作正常

用法：

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

谷歌reCaptcha在React.js工作？

1 个答案: