Firebase RecaptchaVerifier.clear() 无效

我有一个 React Web 应用程序，我想在其中实现电话身份验证。我已经根据文档和示例初始化了 recaptchaVerifier。但是，如果我想再次提交表单（比如因为错误）。我收到错误：Error: reCAPTCHA has already been rendered in this element.

我尝试使用删除验证程序.clear方法，但是好像没有效果。下面是示例代码。

有什么是我忽略的吗？

谢谢。

class PhoneAuth extends React.Component {
  static contextTypes = {
    firebase: PropTypes.object.isRequired,
  };

  state = {
    phone: '',
  }

  onChangeHandler = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    })
  }

  onPhoneLoginSubmit = (e) => {
    const { onVerificationSend } = this.props
    const {phone} = this.state
    const {firebase }=this.context

    e.preventDefault()

    this.applicationVerifier = new firebase.auth.RecaptchaVerifier(
      'recaptcha-container',
      { size: 'invisible' }
    );

    firebase.auth().signInWithPhoneNumber(phone, this.applicationVerifier)
      .then((result) => {
        onVerificationSend(result.verificationId)
        this.applicationVerifier.clear()
      })
      .catch (error => {
        this.setState({formError: error})
        this.applicationVerifier.clear()
      })
  }

  render() {
    const { intl } = this.props;
    const { phone, formError } = this.state

    return (
      <div>
      <form onSubmit={this.onPhoneLoginSubmit} name="phone-signin" method="post">
              <input
                id="phone"
                name="phone"
                type="phone"
                onChange={this.onChangeHandler}
                value={phone}
              />
              <label className="input__label" htmlFor="email">
               phone number
              </label>

            {formError && (
              <p >
                {formError.code}
              </p>
            )}

            <button
              type="submit"
            >
              sign in
            </button>
          </form>
          <div id="recaptcha-container"></div>
      </div>
    )
  }
}

所以，我已经弄清楚了。问题不是clear() 方法 - 该方法工作正常。但我必须自己从头开始重新创建验证码容器。医生对此不太清楚，所以这让我很困惑。在文档中有：

从页面中清除 reCAPTCHA 小部件并销毁当前实例。

所以我想通过该方法将其删除。

所以，现在我在渲染方法中有这样的代码：

<div ref={ref => this.recaptchaWrapperRef = ref}>
  <div id="recaptcha-container"></div>
</div>

然后在提交回调中：

if (this.applicationVerifier && this.recaptchaWrapperRef) {
  this.applicationVerifier.clear()
  this.recaptchaWrapperRef.innerHTML = `<div id="recaptcha-container"></div>`
}

// Initialize new reCaptcha verifier
this.applicationVerifier = new firebase.auth.RecaptchaVerifier(
  'recaptcha-container',
  { size: 'invisible' }
);

这是我在反应中设法做到这一点的唯一方法。如果有人还有更好的方法，请随时发布。我认为这非常丑陋（对于 React）。