Google recaptcha 在通过 react-router 更改组件后隐藏

Question

我有这个问题，当我使用反应路由器从一个组件切换到另一个组件时，我的 google recaptcha div 停止显示。 我的组件 google recaptcha

   class Contact extends React.Component{
  constructor(props){
    super(props);
    document.title = "Contact";
  }
  errorHandle(err){
    let loc = document.getElementById("err-" + err);
    loc.className = "error-live";
    setTimeout(() =>{
      loc.className = "error";
    },errSpeed);
  }
  sendMail(e){
    e.preventDefault();
    let message = document.getElementById("message").value,
        name = document.getElementById("name").value,
        email = document.getElementById("email").value,
        captcha = grecaptcha.getResponse();
    if(email.length < 4 || email.length < 4 || name.length < 4){
      this.errorHandle("short");
      return;
    }else if(email.indexOf("@") === -1){
      this.errorHandle("email");//make error
      return;
    }else if(captcha.length === 0){
      this.errorHandle("recaptcha");//make error
      return;
    }
    sa
      .post("./back-end/contact.php")
      .send({name,email,message,captcha})
      .type("application/x-www-form-urlencoded")
      .end(function(err,res){
        res = res.text;
        if(res.search("sent") > 0){
          dbId("contact-done").style.display = "block";
          dbId("contact").style.opacity = 0;
          dbId("contact-done").style.opacity = 1;
          setTimeout(() =>{
            window.location.replace(window.location.href.replace("contact",""));
          },errSpeed);
        }else if(res === "failToSend")
          alert("Failed to send the message please try again");
      })

  }
  render(){
    return(
      <div className = "contact">
        <div id = "contact-done"><p>Thank you for contacting us</p></div>
        <form id = "contact" className="pure-form pure-form-stacked">
          <fieldset>
            <legend>Contact me</legend>

            <label>Name</label>
            <input id="name" type="text" placeholder="Name"></input>

            <label>Email</label>
            <input id="email" type="email" placeholder="Email"></input>

            <label>Message</label>
            <textarea id = "message"></textarea>

            <div id = "recaptcha-contact" className="g-recaptcha" data-sitekey="myKeyHere"></div>

            <div id = "err-email" className = "error">Invalid Email adress</div>
            <div id = "err-recaptcha" className = "error">Please fill in google recaptcha</div>
            <div id = "err-short" className = "error">Each field has to be atleast 4 characters long</div>

            <button onClick = {this.sendMail.bind(this)} className="pure-button pure-button-primary">Send</button>
        </fieldset>
      </form>
    </div>
    );
  }
}

如果我加载 <a href="http://localhost/contact" rel="nofollow">http://localhost/contact</a> it shows up,however as soonas I change path to lets say <a href="http://localhost/articles" rel="nofollow">http://localhost/articles</a> 并切换回来 disappears.What 可能是原因吗？

感谢您的宝贵时间。

Answer 1

我搜索了一段时间没有找到问题的解决方案，我最终做的是每次访问组件时重新渲染 recaptcha :

componentDidMount(){
  setTimeout(() =>{
    window.grecaptcha.render('recaptcha-contact', {
       sitekey: "key",
       callback: function(resp){}
    });
  },300);
}

存在超时，因为 grecaptcha 未定义。

Answer 2

引用此 link https://github.com/ReactTraining/react-router/issues/3256

您应该在每次加载组件时加载 google 验证码 js 文件。

使用 loadJs 模块即可轻松完成。

用npm install loadjs安装模块，你只需要添加 var loadjs = require('loadjs'); loadjs('https://www.google.com/recaptcha/api.js?hl=fa'); 到您的组件。

此外，您甚至不需要将 js 文件添加到您的 html 代码中！