React.PropTypesは死んでいて、Reactで長生きするPropTypes
React v15.5 以降、PropTypeはReactパッケージで非推奨になり、独自のパッケージが提供されています。
変化は人生の必然的な部分です。
結果は2つあります。 1)別のタイプチェックメカニズムを使用する場合、エンドユーザーに不要なバルクを出荷することを心配する必要はありません。 輸入を省略し、減量を銀行に預けます。 2)PropType宣言は、これまで考えられていたよりも洗練されたものになります。
欠点は、v15.3(判断なし)以降、PropTypesを直接呼び出すことに関する非推奨の警告を無視している場合、その鶏はねぐらに戻ってきたことです。
それを始めましょう、しかし最初にあなたはあなたのプロジェクトにパッケージをインストールする必要があるでしょう。
npm install prop-types --save
または、ご存知のとおり、ヤーンのことを実行してください。 いずれにせよ、検証付きの古い単純なコンポーネントは次のとおりです。
import React from 'react'; function Detail ({caption, style}) { return <p style={style}>{caption}</p> } Detail.propTypes = { caption: React.PropTypes.string.isRequired, style: React.PropTypes.objectOf( React.PropTypes.string ), } export default Detail;
そしてここにそれは新しい方法です:
import React from 'react'; import PropTypes from 'prop-types'; function Detail ({caption, style}) { return <p style={style}>{caption}</p> } Detail.propTypes = { caption: PropTypes.string.isRequired, style: PropTypes.objectOf( PropTypes.string ), } export default Detail;
実際、それをスクラッチします。 私たちはsvelteを約束しました。 したがって、次のように非構造化スピンを与えます。
import React from 'react'; import {string, objectOf} from 'prop-types'; function Detail ({caption, style}) { return <p style={style}>{caption}</p> } Detail.propTypes = { caption: string.isRequired, style: objectOf( string ), } export default Detail;
親愛なる友よ、それは絵のようにきれいです、そして良いニュースはそれがすべてあなたが慣れているように正確に機能するということです。 開発中の警告。 生産中の沈黙。
唯一の注目すべき例外は、上記の例外です。直接呼び出されたPropTypesです。 これらのチェックは、本番環境で次のブロックを自動的に呼び出します。
var productionTypeChecker = function () { invariant(false, 'React.PropTypes type checking code is stripped in production.'); };
エラーをスローし、ものを壊します。 これらの呼び出しをコードでリファクタリングするか、prop-types
の独自のフォークを作成して、アップグレードトレインに保持する必要があります。
何をするにしても、この変化に汗を流さないでください。 軽度の不便税を伴う純利益です。