Question

在我尝试添加除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（）指出关键字函数。

我正在渲染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”插件。

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

Answer 1

函数定义应为：

send() {

而不是

send: function() {

在类

中定义方法时，我们不会添加function关键字

反应组件“意外令牌功能”

1 个答案: