web-dev-qa-db-ja.com

Google reCaptchaはReact.jsで動作しますか？

私はとても近づいています... 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に含めるための適切な方法を知っているだけでも、誰かが私にいくつかのガイダンスを提供できれば、コンポーネントは大いに役立ちます。

これは正しい道にあるように見えますか（リンク： https://discuss.reactjs.org/t/using-external-script-libraries/2256 ）？

javascriptreactjsrecaptcha
10
jscul

https://github.com/appleboy/react-recaptcha を使用できます

図書館はうまく働いています

使用法：

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