web-dev-qa-db-de.com

Statische Eigenschaften, die unter ES6 nicht funktionieren

Ich möchte einige Regeln für Requisiten hinzufügen:

import React, { Component } from 'react'

export default class App extends Component {
  static propTypes = { name: React.PropTypes.string.isRequired };

  render() {
    return(
    )
  }
}

Aber ich habe einen Fehler bekommen:

Warning: Failed prop type: Required prop `name` was not specified in `App`.

Ich habe diese Konfiguration für Babel:

{
  "presets": ["es2015", "react"],
  "plugins": ["transform-runtime", "transform-class-properties"]
}

Was habe ich falsch gemacht?

Upd. Code ändern: use static

reactjsecmascript-6babel
14
Pavel

Es scheint, als würden Sie Ihren Code nicht so umwandeln, dass statische Klasseneigenschaften erkannt werden können. Wenn Sie Babel verwenden, kann dies mit der Class-Eigenschaftsumwandlung aktiviert werden: https://babeljs.io/docs/plugins/transform-class-properties/ . 

In unserer Codebasis erhalten wir diese Funktionalität mit dem Stage 1-Preset https://babeljs.io/docs/plugins/preset-stage-1/ .

Natürlich können Sie Ihre Eigenschaften immer in der Klasse definieren:

export default class App extends Component {
  ...
  render() {
    ...
  } 
}

App.propTypes = {
 data: PropTypes.object.isRequired...
}

^^ das erfordert keine besondere Verwandlung.

Die statische Eigenschaft in der Klasse ist Nizza, sodass Sie sie so einrichten können 

export default class App extends Component {
  static propTypes = { name: React.PropTypes.string.isRequired };
  render() {...} 
}

anstatt die propTypes für this im Konstruktor zu definieren.

17
JizoSaves

Dies ist die statische Eigenschaftsfunktion der ES7-Klasse.

Sie können es mit babel-presets-stage-1 verwenden. Hier ist das Dokument http://babeljs.io/docs/plugins/preset-stage-1/ und http://babeljs.io/docs/plugins/transform-class -Eigenschaften/

Wenn Sie alle Funktionen von ES7 nutzen möchten, müssen Sie lediglich den babel-preset-stage-0 installieren.

npm install babel-preset-stage-0 --save-dev

Da stage-0 Abhängigkeit stage-1 ist, stage-1 Abhängigkeit stage-2 und so weiter. Die npm installiert alle Abhängigkeiten. So können Sie alle ES7-Funktionen nutzen.

2
slideshowp2

Ich lasse diese Antwort für die Kommentare, aber Timothys Antwort in Bezug auf Babel ist besser.

In ES6 haben Klassen Methoden, und das ist es - nicht einmal Eigenschaften, geschweige denn statisch:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static

ES2017 unterstützt möglicherweise einen anderen Eigenschaftsmechanismus:

https://esdiscuss.org/topic/es7-property-initializers

Diese Frage steht in engem Zusammenhang mit Variablenvariablen der ES6-Klasse und ist letztendlich wahrscheinlich ein Dupe.

2
Dave Newton

BENUTZUNG VON BABEL 7

Zur Verwendung von statischen Klasseneigenschaften sowie von Eigenschaften, die mit der Eigenschaftsinitialisiersyntax deklariert wurden, müssen Sie ab babel v7.1.0 ein Plugin wie folgt installieren:

npm install --save-dev @babel/plugin-proposal-class-properties

Außerdem wurden alle jährlichen Voreinstellungen von Babel nicht mehr verwendet. Statt es2015 zu verwenden, müssen Sie statt @babel/preset-env einfach @babel/preset-react installieren und verwenden. Ihre Babel-Konfiguration sollte wie folgt aussehen:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [["@babel/plugin-proposal-class-properties", { "loose": true }],]
}

Lesen Sie mehr über das Plugin hier .

Mit den obigen Installationen und Konfigurationen können Sie Ihre Komponente wie folgt umschreiben:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class App extends Component {
  static propTypes = { name: PropTypes.string.isRequired };

  render() {
    return (
      <div>Static Class Properties</div>
    );
  }
}

Und voila es funktioniert !!

NOTE: PropTypes ist nicht mehr im react-Paket, Sie müssen es separat aus dem prop-types-Paket importieren.

0
Aminu Kano