React組件「意想不到的令牌功能」

Question

我的JSX正在轉發，直到我嘗試添加除render（）之外的第一個函數，即send（）。

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 

，然後將關鍵字功能從發送指出一個錯誤：（）函數。

我在渲染React，那可能是什麼問題？這是我一飲而盡文件做繁重的我：

//----------------------------------------------------------------------------- 
// 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']); 
}); 

這是我的理解是，無論是「反應」或覆蓋類屬性的「ES2015」預設，所以我會得到「變換 - 類屬性「插件。

任何人都可以看到這裏出了什麼問題嗎？

Answer 1

函數定義應該是：

send() { 

而不是

send: function() { 

定義在類中的方法時