web-dev-qa-db-ja.com

ES6で動作しない静的propType

小道具にいくつかのルールを追加したい：

import React, { Component } from 'react'

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

  render() {
    return(
    )
  }
}

しかし、私はこれにエラーが発生しました：

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

Babelには次の構成があります。

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

私が間違ったことは何ですか？

更新コードの変更：staticを使用

reactjsecmascript-6babel
15
Pavel

静的クラスプロパティを認識できる方法でコードをトランスコンパイルしていないようです。 babelを使用している場合、これはClass Property Transformを使用して有効にできます： https://babeljs.io/docs/plugins/transform-class-properties/ 。

コードベースでは、ステージ1プリセット https://babeljs.io/docs/plugins/preset-stage-1/ でこの機能を取得します

もちろん、常にクラスでproptypeを定義できます。

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

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

^^これには特別なトランスピレーションは必要ありません。

クラス内の静的プロパティは素晴らしいですが、このように設定できます

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

コンストラクターのthisでpropTypesを定義するのではなく。

20
JizoSaves

これはES7クラスの静的プロパティ機能です。

babel-presets-stage-1で使用できます。ここにドキュメントがあります http://babeljs.io/docs/plugins/preset-stage-1/ および http://babeljs.io/docs/plugins/transform-class-プロパティ/

ES7のすべての機能を使用する場合は、babel-preset-stage-0をインストールするだけです。

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

stage-0依存関係はstage-1であるため、stage-1依存関係stage-2などです。 npmはすべての依存関係をインストールします。したがって、ES7のすべての機能を使用できます。

2
slideshowp2

コメントのためにこの答えを残していますが、バベルに関するティモシーの答えの方が優れています。

ES6では、クラスにはメソッドがあり、それはプロパティですらなく、静的です。

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

ES2017は異なるプロパティメカニズムをサポートする場合があります。

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

この質問は、 ES6クラス変数の代替 に強く関連しており、最終的にはおそらくduです。

2
Dave Newton

BABEL 7の使用

Babel v7.1.0の時点で、静的クラスプロパティおよびプロパティ初期化子構文で宣言されたプロパティを使用するには、以下のようにプラグインをインストールする必要があります。

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

また、すべてのbabelの年間プリセットは廃止されたため、es2015を使用する代わりに、@babel/preset-envをインストールして@babel/preset-reactと一緒に使用します。 babelの構成は次のようになります。

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

プラグインの詳細については、こちらをご覧ください こちら 。

上記のインストールと構成により、コンポーネントを次のように書き換えることができます。

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

そして出来上がり！

[〜＃〜] note [〜＃〜]：PropTypesはreactパッケージに含まれていないため、prop-typesとは別にインポートする必要がありますパッケージ。

2
Aminu Kano