在 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>
    );
  }
};

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

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

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

谁能看出我哪里错了？我刚刚完成了 5 个单独的 udemy 课程，这些课程应该是 react 和 MERN 的介绍，但我无法开始工作。

Answer 1

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

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

以下是使用 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>
    );
  }
};

Answer 2

问题是您正在混合使用 es5 和 es6 编写反应组件的方式。我会建议你写信es6。在最后粘贴了有用的链接，请参阅这些链接了解更多详细信息。

这样写：

class Greeter extends React.Component {

    constructor(){
        super();
        this.state = {
            name: this.props.name,
            message: this.props.message
        }
        this.handleNewData = this.handleNewData.bind(this);
    }

    handleNewData (updates) {
        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>
        );
    }
};

Greeter.defaultProps = {
    name: 'React',
    message: 'This is the default message!'
};

链接：

DefaultProps

es6 class

React DOC

No Autobinding of methods