javascript - 了解 React 基本示例

Question

在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(){} 调用了什么？我需要什么才能让它工作？

Answer 1

如您所料，这是 ES6(又名 ES2015)中引入的语法，称为 shorthand methods .

这个

{
  render() {}
}

是这个的简写语法

{
  render: function() {}
}

你可以用很长的方式编写它(为了与旧的 JS 规范兼容)或使用更新的 JS 引擎。这是此特定语言功能的兼容性表:http://kangax.github.io/compat-table/es6/#test-object_literal_extensions_shorthand_methods

如果您使用的是 babel，请确保包含 es2015 预设。