React 客户端渲染——handleClick 不起作用答案

【问题标题】：React client rendering -- handleClick not workingReact 客户端渲染——handleClick 不起作用
【发布时间】：2015-07-24 05:32:22
【问题描述】：

这是一个处理点击的简单反应文件：

//src/react/components/list.js
/** @jsx React.DOM */
var React = require('react/addons');
var List = React.createClass({
  displayName: 'List',

  handleClick: function() {
    console.error('click');
    var resultData = {
      name: 'test',
      version: '0.0.1'
    };
  },

  render: function() {
    return (
      <div>
        List
        <button onClick={this.handleClick}>Add</button>
      </div>
    );
  }
});

module.exports = List;

按钮渲染没有问题，但是当我单击它时没有任何反应。我想这意味着服务器端渲染工作但客户端渲染不起作用？我正在使用 grunt 和 browserify，这是我的 Gruntfile.js：

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    browserify: {
      client: {
        src: ['src/react/**/*.js'],
        dest: 'public/js/react/main.js'
      },
      options: {
        debug: true,
        transform: ['reactify']
      }
    },
    watch: {
      js: {
        files: ['src/react/**/*.js'],
        tasks: ['browserify']
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-browserify');
  grunt.registerTask('default', ['browserify', 'watch']);
};

然后我确认 src/react/components/list.js 中的代码内置在 /public/js/react/main.js 中。那么问题可能是什么？任何帮助表示赞赏！

【问题讨论】：

标签： gruntjs reactjs rendering browserify grunt-browserify

【解决方案1】：

http://plnkr.co/edit/lJ2aWzvcR2vQ6PVuneqK?p=preview

我在 plnkr 上尝试过，效果很好（打开 Chrome 控制台或 Firebug 以实际看到当您单击按钮时，会抛出 console.error）。

也许你这边的require('react/addons') 不工作？如果您已经将React 作为全局变量，那么我认为这个require 是您问题的根源。

【讨论】：

嗨 @Tom，我在 List.js 中评论 var React = require('react/addons'); 但我无法再启动服务器：ReferenceError: React 未定义。顺便说一句，componentDidMount 中的 console.error() 也没有被调用，这很奇怪——无论是在服务器端日志中还是在 Chrome 的控制台中。谢谢！
好了，让React导入就好了。我想你弄错了，你在这里提供的代码中没有componentDidMount，但是如果有一个componentDidMount，其中有一个console.error，则该消息应该显示在浏览器的控制台上。顺便说一句，这里没有服务器端渲染，browserify + watch 转换仅“服务” JS 分发，并且仅由您的浏览器执行。很高兴帮助:)
我在代码中添加了componentDidMount ，但在浏览器控制台或服务器日志中没有看到任何错误。好吧，我的设置肯定有一些根本性的问题。