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

我找不到任何资源来帮助我找出令牌是什么，更不用说当它们被预期或意外时。

有人能看到我弄错了吗？我刚刚完成了5个单独的udemy课程，这些课程应该是一个反应和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

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

2 个答案: