0

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

//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 中。那么问题可能是什么？任何帮助表示赞赏！

4

1 回答 1

0

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

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

也许在你这边是require('react/addons')那行不通？如果你已经有React一个全局变量，require我认为这是你问题的根源。

于 2015-07-24T06:30:11.133 回答