Question

我开发了一个使用create-react-app的应用，我收到了此行的未捕获的SyntaxError：意外的标识符：

import React, { Component } from 'react';

public/scripts/app.js中的

：

'use strict';

import React, { Component } from 'react';

var _createClass = (function() {
  function defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ('value' in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }
  return function(Constructor, protoProps, staticProps) {
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  };
})();

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError('Cannot call a class as a function');
  }
}

function _possibleConstructorReturn(self, call) {
  if (!self) {
    throw new ReferenceError(
      "this hasn't been initialised - super() hasn't been called"
    );
  }
  return call && (typeof call === 'object' || typeof call === 'function')
    ? call
    : self;
}

function _inherits(subClass, superClass) {
  if (typeof superClass !== 'function' && superClass !== null) {
    throw new TypeError(
      'Super expression must either be null or a function, not ' +
        typeof superClass
    );
  }
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
  if (superClass)
    Object.setPrototypeOf
      ? Object.setPrototypeOf(subClass, superClass)
      : (subClass.__proto__ = superClass);
}

var DecisionTreeApp = (function(_React$Component) {
  _inherits(DecisionTreeApp, _React$Component);

  function DecisionTreeApp(props) {
    _classCallCheck(this, DecisionTreeApp);

    var _this = _possibleConstructorReturn(
      this,
      (
        DecisionTreeApp.__proto__ || Object.getPrototypeOf(DecisionTreeApp)
      ).call(this, props)
    );

    _this.handleDeleteOptions = _this.handleDeleteOptions.bind(_this);
    _this.handlePick = _this.handlePick.bind(_this);
    _this.handleAddOption = _this.handleAddOption.bind(_this);
    _this.state = {
      options: []
    };
    return _this;
  }

  _createClass(DecisionTreeApp, [
    {
      key: 'handleDeleteOptions',
      value: function handleDeleteOptions() {
        this.setState(function() {
          return {
            options: []
          };
        });
      }
    },
    {
      key: 'handlePick',
      value: function handlePick() {
        var randomNum = Math.floor(Math.random() * this.state.options.length);
        var option = this.state.options[randomNum];
        alert(option);
      }
    },
    {
      key: 'handleAddOption',
      value: function handleAddOption(option) {
        if (!option) {
          return 'Enter valid value to add item';
        } else if (this.state.options.indexOf(option) > -1) {
          return 'This option already exists';
        }

        this.setState(function(prevState) {
          return {
            options: prevState.options.concat(option)
          };
        });
      }
    },
    {
      key: 'render',
      value: function render() {
        var title = 'Decision Tree';
        var subtitle =
          'For binary life decisions, put your trust in a computer';

        return React.createElement(
          'div',
          null,
          React.createElement(Header, { title: title, subtitle: subtitle }),
          React.createElement(Action, {
            hasOptions: this.state.options.length > 0,
            handlePick: this.handlePick
          }),
          React.createElement(Options, {
            options: this.state.options,
            handleDeleteOptions: this.handleDeleteOptions
          }),
          React.createElement(AddOption, {
            handleAddOption: this.handleAddOption
          })
        );
      }
    }
  ]);

  return DecisionTreeApp;
})(React.Component);

var Header = (function(_React$Component2) {
  _inherits(Header, _React$Component2);

  function Header() {
    _classCallCheck(this, Header);

    return _possibleConstructorReturn(
      this,
      (Header.__proto__ || Object.getPrototypeOf(Header)).apply(this, arguments)
    );
  }

  _createClass(Header, [
    {
      key: 'render',
      value: function render() {
        return React.createElement(
          'div',
          null,
          React.createElement('h1', null, this.props.title),
          React.createElement('h2', null, this.props.subtitle)
        );
      }
    }
  ]);

  return Header;
})(React.Component);

var Action = (function(_React$Component3) {
  _inherits(Action, _React$Component3);

  function Action() {
    _classCallCheck(this, Action);

    return _possibleConstructorReturn(
      this,
      (Action.__proto__ || Object.getPrototypeOf(Action)).apply(this, arguments)
    );
  }

  _createClass(Action, [
    {
      key: 'render',
      value: function render() {
        return React.createElement(
          'div',
          null,
          React.createElement(
            'button',
            {
              onClick: this.props.handlePick,
              disabled: !this.props.hasOptions
            },
            'What should I do?'
          )
        );
      }
    }
  ]);

  return Action;
})(React.Component);

var Options = (function(_React$Component4) {
  _inherits(Options, _React$Component4);

  function Options() {
    _classCallCheck(this, Options);

    return _possibleConstructorReturn(
      this,
      (Options.__proto__ || Object.getPrototypeOf(Options)).apply(
        this,
        arguments
      )
    );
  }

  _createClass(Options, [
    {
      key: 'render',
      value: function render() {
        return React.createElement(
          'div',
          null,
          React.createElement(
            'button',
            { onClick: this.props.handleDeleteOptions },
            'Remove All'
          ),
          this.props.options.map(function(option) {
            return React.createElement(Option, {
              key: option,
              optionText: option
            });
          })
        );
      }
    }
  ]);

  return Options;
})(React.Component);

var Option = (function(_React$Component5) {
  _inherits(Option, _React$Component5);

  function Option() {
    _classCallCheck(this, Option);

    return _possibleConstructorReturn(
      this,
      (Option.__proto__ || Object.getPrototypeOf(Option)).apply(this, arguments)
    );
  }

  _createClass(Option, [
    {
      key: 'render',
      value: function render() {
        return React.createElement('div', null, this.props.optionText);
      }
    }
  ]);

  return Option;
})(React.Component);

var AddOption = (function(_React$Component6) {
  _inherits(AddOption, _React$Component6);

  function AddOption(props) {
    _classCallCheck(this, AddOption);

    var _this6 = _possibleConstructorReturn(
      this,
      (AddOption.__proto__ || Object.getPrototypeOf(AddOption)).call(
        this,
        props
      )
    );

    _this6.handleAddOption = _this6.handleAddOption.bind(_this6);
    _this6.state = {
      error: undefined
    };
    return _this6;
  }

  _createClass(AddOption, [
    {
      key: 'handleAddOption',
      value: function handleAddOption(e) {
        e.preventDefault();

        var option = e.target.elements.option.value.trim();
        var error = this.props.handleAddOption(option);

        this.setState(function() {
          return { error: error };
        });
      }
    },
    {
      key: 'render',
      value: function render() {
        return React.createElement(
          'div',
          null,
          this.state.error && React.createElement('p', null, this.state.error),
          React.createElement(
            'form',
            { onSubmit: this.handleAddOption },
            React.createElement('input', { type: 'text', name: 'option' }),
            React.createElement('button', null, 'Add Option')
          )
        );
      }
    }
  ]);

  return AddOption;
})(React.Component);

ReactDOM.render(
  React.createElement(DecisionTreeApp, null),
  document.getElementById('app')
);

我不清楚为什么以及我在这里用解决方案研究的所有文档似乎都不适用。

Answer 1

import React, { Component } from 'react';

Answer 2

你错过了一个逗号。它应该是import React, { Component } from 'react'

Answer 3

Ok to solve, i commented out the whole line, that is ES6 import and it seems you using ES5.

//import React, { Component } from 'react';

var _createClass = (function() {
  function defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ('value' in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }
  return function(Constructor, protoProps, staticProps) {
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  };
})();

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError('Cannot call a class as a function');
  }
}

function _possibleConstructorReturn(self, call) {
  if (!self) {
    throw new ReferenceError(
      "this hasn't been initialised - super() hasn't been called"
    );
  }
  return call && (typeof call === 'object' || typeof call === 'function')
    ? call
    : self;
}

function _inherits(subClass, superClass) {
  if (typeof superClass !== 'function' && superClass !== null) {
    throw new TypeError(
      'Super expression must either be null or a function, not ' +
        typeof superClass
    );
  }
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
  if (superClass)
    Object.setPrototypeOf
      ? Object.setPrototypeOf(subClass, superClass)
      : (subClass.__proto__ = superClass);
}

var DecisionTreeApp = (function(_React$Component) {
  _inherits(DecisionTreeApp, _React$Component);

  function DecisionTreeApp(props) {
    _classCallCheck(this, DecisionTreeApp);

    var _this = _possibleConstructorReturn(
      this,
      (
        DecisionTreeApp.__proto__ || Object.getPrototypeOf(DecisionTreeApp)
      ).call(this, props)
    );

    _this.handleDeleteOptions = _this.handleDeleteOptions.bind(_this);
    _this.handlePick = _this.handlePick.bind(_this);
    _this.handleAddOption = _this.handleAddOption.bind(_this);
    _this.state = {
      options: []
    };
    return _this;
  }

  _createClass(DecisionTreeApp, [
    {
      key: 'handleDeleteOptions',
      value: function handleDeleteOptions() {
        this.setState(function() {
          return {
            options: []
          };
        });
      }
    },
    {
      key: 'handlePick',
      value: function handlePick() {
        var randomNum = Math.floor(Math.random() * this.state.options.length);
        var option = this.state.options[randomNum];
        alert(option);
      }
    },
    {
      key: 'handleAddOption',
      value: function handleAddOption(option) {
        if (!option) {
          return 'Enter valid value to add item';
        } else if (this.state.options.indexOf(option) > -1) {
          return 'This option already exists';
        }

        this.setState(function(prevState) {
          return {
            options: prevState.options.concat(option)
          };
        });
      }
    },
    {
      key: 'render',
      value: function render() {
        var title = 'Decision Tree';
        var subtitle =
          'For binary life decisions, put your trust in a computer';

        return React.createElement(
          'div',
          null,
          React.createElement(Header, { title: title, subtitle: subtitle }),
          React.createElement(Action, {
            hasOptions: this.state.options.length > 0,
            handlePick: this.handlePick
          }),
          React.createElement(Options, {
            options: this.state.options,
            handleDeleteOptions: this.handleDeleteOptions
          }),
          React.createElement(AddOption, {
            handleAddOption: this.handleAddOption
          })
        );
      }
    }
  ]);

  return DecisionTreeApp;
})(React.Component);

var Header = (function(_React$Component2) {
  _inherits(Header, _React$Component2);

  function Header() {
    _classCallCheck(this, Header);

    return _possibleConstructorReturn(
      this,
      (Header.__proto__ || Object.getPrototypeOf(Header)).apply(this, arguments)
    );
  }

  _createClass(Header, [
    {
      key: 'render',
      value: function render() {
        return React.createElement(
          'div',
          null,
          React.createElement('h1', null, this.props.title),
          React.createElement('h2', null, this.props.subtitle)
        );
      }
    }
  ]);

  return Header;
})(React.Component);

var Action = (function(_React$Component3) {
  _inherits(Action, _React$Component3);

  function Action() {
    _classCallCheck(this, Action);

    return _possibleConstructorReturn(
      this,
      (Action.__proto__ || Object.getPrototypeOf(Action)).apply(this, arguments)
    );
  }

  _createClass(Action, [
    {
      key: 'render',
      value: function render() {
        return React.createElement(
          'div',
          null,
          React.createElement(
            'button',
            {
              onClick: this.props.handlePick,
              disabled: !this.props.hasOptions
            },
            'What should I do?'
          )
        );
      }
    }
  ]);

  return Action;
})(React.Component);

var Options = (function(_React$Component4) {
  _inherits(Options, _React$Component4);

  function Options() {
    _classCallCheck(this, Options);

    return _possibleConstructorReturn(
      this,
      (Options.__proto__ || Object.getPrototypeOf(Options)).apply(
        this,
        arguments
      )
    );
  }

  _createClass(Options, [
    {
      key: 'render',
      value: function render() {
        return React.createElement(
          'div',
          null,
          React.createElement(
            'button',
            { onClick: this.props.handleDeleteOptions },
            'Remove All'
          ),
          this.props.options.map(function(option) {
            return React.createElement(Option, {
              key: option,
              optionText: option
            });
          })
        );
      }
    }
  ]);

  return Options;
})(React.Component);

var Option = (function(_React$Component5) {
  _inherits(Option, _React$Component5);

  function Option() {
    _classCallCheck(this, Option);

    return _possibleConstructorReturn(
      this,
      (Option.__proto__ || Object.getPrototypeOf(Option)).apply(this, arguments)
    );
  }

  _createClass(Option, [
    {
      key: 'render',
      value: function render() {
        return React.createElement('div', null, this.props.optionText);
      }
    }
  ]);

  return Option;
})(React.Component);

var AddOption = (function(_React$Component6) {
  _inherits(AddOption, _React$Component6);

  function AddOption(props) {
    _classCallCheck(this, AddOption);

    var _this6 = _possibleConstructorReturn(
      this,
      (AddOption.__proto__ || Object.getPrototypeOf(AddOption)).call(
        this,
        props
      )
    );

    _this6.handleAddOption = _this6.handleAddOption.bind(_this6);
    _this6.state = {
      error: undefined
    };
    return _this6;
  }

  _createClass(AddOption, [
    {
      key: 'handleAddOption',
      value: function handleAddOption(e) {
        e.preventDefault();

        var option = e.target.elements.option.value.trim();
        var error = this.props.handleAddOption(option);

        this.setState(function() {
          return { error: error };
        });
      }
    },
    {
      key: 'render',
      value: function render() {
        return React.createElement(
          'div',
          null,
          this.state.error && React.createElement('p', null, this.state.error),
          React.createElement(
            'form',
            { onSubmit: this.handleAddOption },
            React.createElement('input', { type: 'text', name: 'option' }),
            React.createElement('button', null, 'Add Option')
          )
        );
      }
    }
  ]);

  return AddOption;
})(React.Component);

ReactDOM.render(
  React.createElement(DecisionTreeApp, null),
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="app">

</div>

Reactjs Uncaught SyntaxError：意外的标识符

3 个答案: