瞭解陣營基本的例子

在basic example on the React frontpage有：瞭解陣營基本的例子

class HelloMessage extends React.Component { 
    render() { 
    return <div>Hello {this.props.name}</div>; 
    } 
} 

ReactDOM.render(<HelloMessage name="Jane" />, mountNode);

如果我做我的設置類似的東西，我得到：

ERROR in ./src/index.jsx 
Module build failed: SyntaxError: Unexpected token, expected } (54:11) 

    52 | 
    53 | class EisTable extends React.Component { 
> 54 | render() { 
    |   ^
    55 |  return <div>Hello </div>; 
    56 | } 
    57 | }

這是確實讓SENS給我。可能它是我不知道的一些ES6技巧，但對於方便的JS來說，這個語法沒有任何意義。這是什麼render(){}調用，我需要什麼使它的工作？

來源

2016-11-21 Roland Kofler

正如您猜測的那樣，這是ES6（又名ES2015）中引入的語法，稱爲shorthand methods。

這

{ 
    render() {} 
}

是這個

{ 
    render: function() {} 
}

的簡寫語法，你可以把它寫了很長的路要走（用於與舊JS規格兼容性）或使用較新的JS引擎。以下是此特定語言功能的兼容性表格：http://kangax.github.io/compat-table/es6/#test-object_literal_extensions_shorthand_methods

如果您使用的是babel，請確保包含es2015預設。

來源

2016-11-21 10:43:03