Question

在Codeacademy中，这是编写反应组件的示例语法

var Input = React.createClass({
  getInitialState: function () {
    return {
      userInput: ''
    };
  },

  handleUserInput: function (e) {
    this.setState({
      userInput: e.target.value
    });
  },

  render: function () {
    return (
      <div>
        <input 
          type="text" 
          onChange={this.handleUserInput}
          value={this.state.userInput}  />
        <h1>{this.state.userInput}</h1>
      </div>
    );
  }
});

它通常看起来像一个具有各种属性的基本Javascript对象，这对我来说很有意义。

以下是反应官方教程

的示例

    class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

我是Javascript和React的新手，所以第二种方法对我来说不太合理。有人可以帮助我了解class NameForm extends React.Component之类的内容可能与var Input = React.createClass之类的内容相比较吗？此外，我们很想知道是否有更多的基础教程可以使用官方教程中的语法进行反应（这解释了基本级别的语法）

Answer 1

第一个例子是 ECMAScript 5 ，第二个例子是 ECMAScript 6

Here您可以找到它们之间的更改列表。

要运行对ECMAScript 6进行反应，您应该使用Babel，但首先我会建议：

ReactJS有精心编写的文档，首先 - ＆＃34; Hellow Word＆＃34;随便用它。

Codeacademy React Syntax vs Official Tutorial

1 个答案: