Javascript 调用renderComponentToStaticMarkup时使用react.js呈现onclick属性

假设我有一个react组件，它将呈现给静态html服务器端。某些元素将具有onsubmit和onclick属性，这些属性不会由react处理，但仍应调用javascript函数。在这种情况下，我希望在服务器端生成一个联系人表单，但客户端需要加载recaptcha：

var contactForm = React.createClass({
  render: function() {
    var recaptcha_id = "recaptcha_div";
    return(
        <div className="contact pure-form">
          <h4 className="boxedTitle">Contact Form</h4>
          <form key="form" method="POST" action=".">
          <fieldset key="sender_email">
            <label>Email</label>
            <input name="sender_email" placeholder="Your Email" type="email" />
          </fieldset>
          <fieldset key="subject">
            <label>Subject</label>
            <input name="subject" placeholder="Subject" type="text" />
          </fieldset>
          <fieldset key="message">
            <label>Message</label>
            <textarea name="message" placeholder="Message"/>
          </fieldset>
          <fieldset key="humanity">
            <div id={recaptcha_id}></div>
            <input ref="captcha_btn" type="button" value="Show reCAPTCHA" onClick={"showRecaptcha('"+recaptcha_id+"');"}></input>
          </fieldset>
          <fieldset key="submit">
            <input type="submit" className="btn btn-primary" value="Send"/>
          </fieldset>
          </form>
        </div>
    )
  }
});

console.log(React.renderComponentToStaticMarkup(contatForm()))

var contactForm=React.createClass({
render:function（）{
var recaptcha\u id=“recaptcha\u div”；
返回(
联系方式
电子邮件
主题
消息
)
}
});
console.log（React.renderComponentToStaticMarkup（contatForm（）））

但不会渲染onClick。我尝试了其他一些不起作用的方法：

• 已尝试onclick属性，未渲染
• 提供的componentDidMount手动设置DOM节点上的属性，但在呈现静态标记时不会调用它

---

onClick不接受字符串。您需要向它传递一个函数。通常，您可以执行

onClick={window.showRecaptcha.bind（null，recaptcha\u id）}

当然，这不适用于renderComponentToStaticMarkup。您必须使用JavaScript（外部或内联

标记）绑定事件，或者做一些黑客行为，或者不使用react。带有addEventListener的

标记可能是这里最好的解决方案

---

JavaScript字符串被认为是一种糟糕的做法已经有5年多了。这包括html、eval、setTimeout/setInterval中的onclick等，还有一些可能我忘记了。即使在呈现标记时，这也不是一种方法。

我遇到了同样的问题。我的解决办法是使用

---

希望能有所帮助，

我也遇到了同样的问题，因为我在呈现组件后将JS插入到DOM中。我从前面的答案中找到了一些线索来解决这个问题，并得出以下结论：

wrapper_function(){
   //function i want in my onclick attribute
   window.myFunc();
}
render() {

   return(
      <img className="openbtn" onClick={this.wrapper_function.bind(this)} src="..."/>

wrapper_函数（）{
//我想在onclick属性中使用的函数
window.myFunc（）；
}
render（）{
返回(

实际上，更简单的方法是在客户端JS中分配onclick侦听器

wrapper_function(){
   //function i want in my onclick attribute
   window.myFunc();
}
render() {

   return(
      <img className="openbtn" onClick={this.wrapper_function.bind(this)} src="..."/>