Question

我有这个代码，它是使用node-jsx编译的服务器端，但点击事件不会触发。作为新手我无法弄清楚我错过了什么

/** @jsx React.DOM */

var React = require('react/addons')
var mui = require('material-ui');
var ThemeManager = new mui.Styles.ThemeManager();
var injectTapEventPlugin = require("react-tap-event-plugin");

var UnyDentApp = React.createClass({

    childContextTypes: {
    muiTheme: React.PropTypes.object
      },

    getChildContext: function() {
        return {
          muiTheme: ThemeManager.getCurrentTheme()
        };
      },

    componentDidMount: function () {

      },

    render: function () {
        var menuItems = [
          { route: 'home', text: 'Home' },
          { route: 'about', text: 'About' },
        ];

        return (
          <div id="uny-dent">
            <mui.LeftNav
              ref='leftNav'
              menuItems={menuItems}
              docked={false} />
            <mui.AppBar
                title="UnyDent" onMenuIconButtonTouchTap={ this._handleClick }/>
          </div>
        )
      },

    _handleClick: function()
      {
        alert('ok');
      },

    toggleNav: function(e){
        e.preventDefault();
        alert();
        this.refs.leftNav.toggle();
      }
  });

/* Module.exports instead of normal dom mounting */
module.exports = UnyDentApp;

Answer 1

看起来你正在尝试做通常所说的“同构反应”。这不同于简单地呈现反应模板服务器端（导致呈现的静态页面），因为它还支持“安装”客户端的反应组件（导致呈现的动态页面。）

现在你只是在做前者，因此React实际上并没有在客户端运行，因此点击事件实际上并没有“连线”。同构反应有几种不同的解决方案。以下是Paypal团队中的一个：https://github.com/paypal/react-engine

ReactJS服务器端呈现点击事件不会触发

1 个答案: