React 组件“意外的令牌功能”答案

【问题标题】：React component "unexpected token function"React 组件“意外的令牌功能”
【发布时间】：2017-03-18 01:21:34
【问题描述】：

在我尝试添加除 render() 之外的第一个函数，即 send() 之前，我的 JSX 编译得很好。

import React from 'react';
import ReactDOM from 'react-dom';

class Lobby extends React.Component {

    send: function() {
        alert("chat-send button clicked");
    },

    render() {
        return (
            <div> 
                <button onClick={this.send} id="chat-send">Send</button>
            </div>
        )
    };
}

ReactDOM.render(<Lobby />, document.getElementById("chat-pin"));

我收到一条错误提示

SyntaxError: /pathname.../file.js: Unexpected token

然后从send中指出关键字function：function()。

我正在渲染 React，那么可能是什么问题？这是我的 gulp 文件为我完成了繁重的工作：

//-----------------------------------------------------------------------------
// gulpfile.js
// Gulp is our task runner. Currently being used to transpile ES6 and React.
//-----------------------------------------------------------------------------
const gulp = require('gulp');
const babelify = require('babelify');
const browserify = require('browserify');
const source = require("vinyl-source-stream");
const buffer = require("vinyl-buffer");

//-----------------------------------------------------------------------------
// Transpile the ES6 and React code.
//-----------------------------------------------------------------------------
gulp.task('js', () => {
    return browserify({ entries: ['react-src/LobbyChatReact.js'] })
    .transform(babelify, {
        presets: ["react", "es2015"],
        plugins: ["transform-class-properties"] })
    .bundle()
    .pipe(source('LobbyChatReact.js'))
    .pipe(gulp.dest('public/javascripts/react-build'));
});

//-----------------------------------------------------------------------------
// Listen for changes in react-src folder. When changes detected, transpile.
//-----------------------------------------------------------------------------
gulp.task('default', ['js'], () => {
    gulp.watch('react-src/LobbyChatReact.js', ['js']);
});

据我了解，“react”或“es2015”预设都没有涵盖类属性，因此我必须获得“transform-class-properties”插件。

谁能看到这里出了什么问题？

【问题讨论】：

标签： class reactjs gulp

【解决方案1】：

函数定义应该是：

send() {

代替

send: function() {

我们在类中定义方法时不添加function关键字

【讨论】：

为了避免no-undef 错误，需要使用this.send() 调用函数。