2017-03-18 15 views
0

私のJSXは、render()以外の最初の関数、つまりsend()を追加しようとするまでうまくいきました。 ()関数:React component "unexpected token function"

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から指摘されたエラーを受けています。

私は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」プリセットどちらも私の理解だったので、私は「transform-を取得する必要がありますクラス - プロパティ "プラグイン。

ここで間違っていることは誰でも見ることができますか?

答えて

1

関数の定義は次のようになります。

+0

'無を避けるためにクラスのメソッドを定義するときに我々は、関数キーワードを追加しない

send() { 

代わりの

send: function() { 

undef'エラーが発生した場合、 'this.send()'で関数を呼び出す必要があります。 –

関連する問題