javascript - 在 React 中编写组件 - MERN 堆栈问题

Question

我正在尝试弄清楚如何在 MERN 应用程序中编写组件。

这是我尽最大努力，考虑到 this advice该如何去做？

import React from 'react';
import ReactDOM from 'react-dom';
import * as ReactBootstrap from 'react-bootstrap'

var GreeterMessage = require('GreeterMessage');
var GreeterForm = require('GreeterForm');

class Greeter extends React.Component {
  getDefaultProps: function () {
    return {
      name: 'React',
      message: 'This is the default message!'
    };
  },
  getInitialState: function () {
    return {
        name: this.props.name,
        message: this.props.message
    };
  },
  handleNewData: function (updates) {
    this.setState(updates);
  },
  render: function () {
    var name = this.state.name;
    var message = this.state.message;

    return (
      <div>
        <GreeterMessage name={name} message={message}/>
        <GreeterForm onNewData={this.handleNewData}/>
      </div>
    );
  }
};

当我保存此内容并在终端中运行 web pack 以检查所有内容时，我收到以下反馈:

ERROR in ./app/components/Greeter.jsx
Module build failed: SyntaxError: Unexpected token (9:19)

   7 | 
   8 | class Greeter extends React.Component {
>  9 |   getDefaultProps: function() {
     |                    ^
  10 |     return {
  11 |       name: 'React',
  12 |       message: 'This is the default message!'

 @ ./app/app.jsx 19:14-32

我找不到任何资源来帮助我弄清楚 token 是什么，更不用说它们何时是预期的或意外的。

谁能看出我哪里错了？我刚刚完成了 5 个单独的 udemy 类(class)，这些类(class)应该是 React 和 MERN 的介绍，但我无法迈出第一步。

Answer 1

看起来您将旧的 React.createClass 语法与最新的 ES6 类表示法混合在一起。你不能混合搭配:)

您还使用 CommonJS 和 ES6 版本将代码导入到您的文件中。虽然这不会破坏代码(除非您使用的设置不支持导入，但我建议始终如一地用餐不会出错。

以下是使用 ES6 语法的代码修改版本的示例:

import React from 'react';
import ReactDOM from 'react-dom';
import * as ReactBootstrap from 'react-bootstrap'

import GreeterMessage from 'GreeterMessage');
import GreeterForm from 'GreeterForm');

// sets the default values for props
Greeter.defaultProps = {
  name: 'React',
  message: 'This is the default message!'
};

class Greeter extends React.Component {
  constructor(){
    super();
    // sets the initial state
    this.state = {
      name: this.props.name,
      message: this.props.message
    };

    // due to this not being bound intrinsically to event handlers,
    // it's advisable to do it here so that the reference to 
    // this.setState works as expected:
    this.handleNewData = this.handleNewData.bind(this);
  }

  handleNewData(updates) {
    // `this` is not automatically bound to event handlers in ES6
    // Ensure that it is bound by using `.bind` (see constructor)
    // OR with ES6 arrow functions
    this.setState(updates);
  }

  render() {
    var name = this.state.name;
    var message = this.state.message;

    return (
      <div>
       <GreeterMessage name={name} message={message}/>
       <GreeterForm onNewData={this.handleNewData}/>
      </div>
    );
  }
};