Question

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

eventHandler

如果我加载它显示的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> ); } }，但是只要我改变路径让我们说http://localhost/contact并切换回它就会消失。可能是什么原因？

感谢您的时间。

Answer 1

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

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

由于grecaptcha未定义，因此超时存在。

Answer 2

对此链接的引用https://github.com/ReactTraining/react-router/issues/3256

每次加载组件时，都应加载google captcha js文件。

只需使用loadJs模块即可完成。

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

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

通过react-router更改组件后，Google会重新隐藏

2 个答案: