index.js

import React, { Component } from 'react';
import { initCaptcha } from '@/utils';
import { BarLoader } from 'react-spinners';
import './index.scss';

const CAPTCHAID = '6b0f5f6c8f334f3693ee754ba5692e36'


class Captcha extends Component {

    state = {
        isReady: false
    }

    componentDidMount() {
        const {getInstance, handleError, onVerify} = this.props;
        const _this = this;
        const el = document.getElementById('captcha');
        el && initCaptcha(function () {
            initNECaptcha({
                    element: el,
                    captchaId: CAPTCHAID,
                    mode: 'float',
                    width: 'auto',
                    onReady: function (instance) {
                        // 验证码一切准备就绪，此时可正常使用验证码的相关功能
                        _this.setState({
                            isReady: true
                        });
                    },
                    onVerify: function (err, data) {
                        onVerify(err,data)
                    }
                },
                instance => {
                    getInstance && getInstance(instance)
                },
                err => {
                    handleError && handleError(err)
                }
            )
        })
    }

    render() {
        return (
            <div 
                className="captcha-container" 
                style={{
                    'marginBottom':  this.props.mrBtm
                }}
            >
                {
                    !this.state.isReady &&
                    <div className="captcha-animation">
                        <BarLoader />
                    </div>
                }
                <div 
                    id={'captcha'} 
                    style={{
                        'marginBottom':  this.props.mrBtm
                    }}
                />
            </div>
        );
    }
}

export default Captcha;