由于动态 iframe，ReactJS Google Recaptcaha 错误

【问题标题】：ReactJS Google Recaptcaha errors due to dynamic iframe由于动态 iframe，ReactJS Google Recaptcaha 错误
【发布时间】：2015-09-03 14:07:26
【问题描述】：

更多关于文档的问题，因为 React 没有记录这种行为。

ReactJS 抛出错误，在 ComponentDidMount() 之前停止 JS 的执行：

Invariant Violation: findComponentRoot ...

这是由于呈现服务器端和客户端之间的内容不同的元素引起的。这可能是由来自 Google Recaptcha 的以下 sn-p 引起的，其中 iFrame 的内容会更改每个请求：

   var MyForm = React.createClass({
...
     render: function() {
       return (
         <iframe src="https://www.google.com/recaptcha/api/fallback?k=SECRETKEY"
                 frameBorder="0" scrolling="no"
                 style={{width: "302px", height: "422px", borderStyle: "none"}} >
          </iframe>
...

【问题讨论】：

标签： iframe reactjs recaptcha

【解决方案1】：

解决方案是危险地将 iframe 设置为内部 html，这样 react 就不会比较渲染的版本。

renderNoscriptCaptcha: function() {
if(!this.state.isBrowser) {
  return {__html:
  '<div style="width: 302px; height: 482px; line-height: 0">\
     <iframe src="https://www.google.com/recaptcha/api/fallback?k=SECRETKEY" frameborder="0" scrolling="no" style="width: 302px; height: 422px; border-style: none" >\
     </iframe>\
     <div style="height: 60px; border-style: none; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px">\
       <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; resize: none; line-height: 24px; font-size: 11px" >\
       </textarea>\
     </div>\
   </div>'
    }
  }
},

render: function() {
   return (
     <div dangerouslySetInnerHTML={this.renderNoscriptCaptcha()}></div>

【讨论】：