在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 | }
哪个是对我有意义。可能这是我不知道的一些 ES6 技巧,但为了方便 JS,这种语法没有意义。这个 render(){}
调用了什么?我需要什么才能让它工作?
最佳答案
如您所料,这是 ES6(又名 ES2015)中引入的语法,称为 shorthand methods .
这个
{
render() {}
}
是这个的简写语法
{
render: function() {}
}
你可以用很长的方式编写它(为了与旧的 JS 规范兼容)或使用更新的 JS 引擎。这是此特定语言功能的兼容性表:http://kangax.github.io/compat-table/es6/#test-object_literal_extensions_shorthand_methods
如果您使用的是 babel,请确保包含 es2015
预设。
关于javascript - 了解 React 基本示例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40718171/