2017-03-18 1 views
0

render() 외에 send()와 같은 첫 번째 함수를 추가하려고 할 때까지 JSX가 잘 돌아갔습니다.() 함수 :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 

을 말한다 다음 키워드 기능 전송에서 지적 된 오류가 발생하고 있습니다.

나는 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"클래스 속성을 적용 사전 설정하고, 그래서 나는 "변환 -를 얻을 수있을 것이라고 나의 이해 클래스 속성 "플러그인.

여기에 어떤 문제가 발생하는지 누구든지 볼 수 있습니까?

답변

1

함수의 정의는 다음과 같아야합니다

+0

'아니 -을 방지하기 위해 클래스의 메소드를 정의 할 때 우리는 함수 키워드를 추가하지

send() { 

대신

send: function() { 

undef' 에러가 발생하면'this.send()'함수를 호출해야합니다. –

관련 문제