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预设。

Answer 2

您可能需要配置在您的环境中转换ES6的功能。

为了做出反应，他们建议使用babel和webpack。

render()函数是react组件生命周期的一部分，它希望在web中返回shadowDOM。

https://facebook.github.io/react/docs/react-component.html

了解React基本示例

2 个答案: