Question

我正在尝试按照本教程进行操作：https://www.viget.com/articles/building-a-multi-step-registration-form-with-react

我因为本教程不使用ES6而陷入困境，所以我在尝试学习差异的同时弄清楚教程文档中是否存在任何问题。

我在这段代码中遇到语法错误。它说我使用过＆＃39;＆＃39;在哪里我应该有一个＆＃39 ;;＆＃39;。我不知道这是否与ES6有关。我尝试替换逗号，但是我得到了同样的错误。

import moment from 'moment-es6';

有人能看出这有什么问题吗？

整页目前设置为：

saveValues: function(field_value) {
    return function() {
      fieldValues = assign({}, fieldValues, field_value)
    }.bind(this)()
  },

更新的尝试

import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router-dom';

var AccountFields   = require('./AccountFields');
var Confirmation    = require('./Confirmation');
var Success         = require('./Success');
var SurveyFields    = require('./SurveyFields');
var assign          = require('object-assign');


var fieldValues = {
  name  :null,
  email :null,
  password :null,
  organisation :null,
  interest  :[]
}



// import { Button } from 'react-bootstrap';
// import * as ReactBootstrap from 'react-bootstrap'

class Registration extends React.Component {
  constructor(props) {
    super(props);
    this.state = function() {
    return {
      step: 1
    }
  },

  saveValues: function(field_value) {
    return function() {
      fieldValues = assign({}, fieldValues, field_value)
    }.bind(this)()
  },

  nextStep: function() {
    this.setState({
        step : this.state.step + 1
    })
  },

  previousStep: function() {
    this.setState({
      step : this.state.step - 1
    })
  },

  submitRegistration: function() {
    switch (this.state.step) {
      case 1:
        return <AccountFields fieldValues={fieldValues}
                              nextStep={this.nextStep}
                              previousStep={this.previousStep}
                              saveValues={this.saveValues}
                />

        case 2:
          return <SurveyFields  fieldValues={fieldValues}
                                nextStep={this.nextStep}
                                previousStep={this.previousStep}
                                saveValues={this.saveValues}
                  />

        case 3:
          return <Confirmation  fieldValues={fieldValues}
                                nextStep={this.nextStep}
                                submitRegistration={this.submitRegistration}
                 />

        case 4:
          return <Success fieldValues={fieldValues} />
    }
  },

  render() {
    return (
      <main>
        <span className="progress-step"> Step {this.state.step}</span>
        <progress className="progress"></progress>
        {this.showStep()}
      </main>

    )
  }

export.default = Registration;

Answer 1

一些事情 - 你在一个类中定义函数和静态变量，而不像你习惯的那样构建一个Object。

查看Javascript类，您将了解有关constructor()函数的更多信息。最后不需要逗号。

  constructor(props) {
    super(props);
    this.state = function() {
    return {
      step: 1
    }
  },    // <-----------

并且，您不会识别此类函数的名称/值对

saveValues: function

相反，要为类定义一个函数，它就像

saveValues() {
   ...
}

或者

saveValues = () => {
  ...
}

哪个也会绑定this

我建议使用一个好的IDE来帮助您快速找到简单的语法问题。 WebStorm可以节省数小时的时间，很多问题都可以通过linter找到并快速暴露出来。

Answer 2

好的，我在这里注意到了一些事情。首先，您的state被定义为函数并返回一个对象。为什么不把它定义为一个开头的对象？有关如何定义状态的文档，请参阅此处：https://reactjs.org/docs/state-and-lifecycle.html

此外，您将功能绑定到this 内嵌。不一定是反模式，但在阅读代码时会增加很多混乱。您可能需要考虑在构造函数中绑定这些函数。您还定义了一个const对象，可以很容易地将其定义为状态本身的一部分。更不用说，我注意到了很多遗漏的分号和其他与语法相关的问题。

以下是我将如何重构此内容（ES6）：

import React from 'react';
import AccountFields from "./AccountFields";
import Confirmation from "./Confirmation";
import Success from "./Success";
import SurveyFields from "./SurveyFields";

export default class Registration extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      step: 1,
      fieldValues: {
        name: null,
        email: null,
        password: null,
        organisation: null,
        interest: []
      }
    };

    this.saveValues = this.saveValues.bind(this);
    this.nextStep = this.nextStep.bind(this);
    this.previousStep = this.previousStep.bind(this);
  }

  saveValues(newFieldValue) {
    this.setState({
      fieldValues: newFieldValue,
    });
  }

  nextStep() {
    this.setState({
      step: this.state.step++
    });
  }

  previousStep() {
    this.setState({
      step: this.state.step --
    });
  }

  submitRegistration() {
    switch (this.state.step) {
      case 1:
        return (
          <AccountFields
            fieldValues={this.state.fieldValues}
            nextStep={this.nextStep}
            previousStep={this.previousStep}
            saveValues={this.saveValues}
          />);

      case 2:
        return (
          <SurveyFields
            fieldValues={this.state.fieldValues}
            nextStep={this.nextStep}
            previousStep={this.previousStep}
            saveValues={this.saveValues}
          />);

      case 3:
        return (
          <Confirmation
            fieldValues={this.state.fieldValues}
            nextStep={this.nextStep}
            submitRegistration={this.submitRegistration}
          />);

      case 4:
        return <Success fieldValues={this.state.fieldValues} />;

      // You should probably add a default case here.
    }
  }

  render() {
    return (
      <main>
        <span className="progress-step"> Step {this.state.step}</span>
        <progress className="progress"/>
        {/* Use the state, and not a non-existent function */}
        `{this.state.step}/4`
      </main>

    );
  }
}

我强烈建议您在尝试深入研究ES5之前阅读React教程 - ＆gt; ES6解析（即使它看起来像一个半体面的教程）。有一些很大的不同，但看起来本教程的基础逻辑有点缺乏。

React - 语法 - 如何在ES6中编写

2 个答案: