2

Tenho o seguinte erro quando tento utilizar o component desta forma.

client?cd17:119 ./src/App/Components/AddNote.js
Module build failed: SyntaxError: super() outside of class constructor (9:4)

   7 | const FormText = React.createClass({
   8 |   constructor(props) {
>  9 |     super(props)
     |     ^
  10 |     this.state = { title: '', note: ''}
  11 | 
  12 |     this.handleChange = this.handleChange.bind(this)

 @ ./src/App/App.js 17:15-46
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index

Mas se eu utilizar desta outra forma consigo passar normalmente as propriedades para construtor.Alguém consegue me dizer qual erro estou cometendo?

class AddForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {title: '', note: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({title: event.target.value, note: event.target.value});
  }

  handleSubmit(event) {
    alert('Os dados foram submetidos' + this.state.title +' e '+ this.state.note);
    event.preventDefault();
  }

1 Resposta 1

2

A diferença é que uma é JavaScript válido em ES5 e outro é código ES6. Ou seja, no inicio quando o React foi lançado usava-se muito código compativel com ES5 (ECMAScript 5) e que não precisava ser transpilado. Mais tarde o Babel e outros transpiladores começaram a converter código ES6 com Classes recém inseridas na linguagem e passou a adoptar-se a sintaxe de classe, deixando a inicial, de Objeto.

Assim, em React so estilo ES5, com objetos não se usa o super() nem o this.state = {}. Em vêz disso passam-se métodos que fazem isso:

  // defenir Tipos de valores
  propTypes: {
    initialValue: React.PropTypes.string
  },
  // defenir valores antes do estado mudar
  defaultProps: {
    initialValue: ''
  },
  // Receber as primeiras props
  getInitialState: function() {
    return {
      text: this.props.initialValue || 'placeholder'
    };
  },

Em sintaxe ES6 isso seria simplesmente:

super(props);
this.state = {algo: props.algo};

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .