著者は、 Creative Commons を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

このチュートリアルでは、 props をコンポーネントに渡して、カスタムコンポーネントを作成します。 小道具は、JSX要素に提供する引数です。 これらは標準のHTMLプロップのように見えますが、事前定義されておらず、数値、文字列、関数配列、さらにはさまざまなJavaScriptデータ型を持つことができます。その他のReactコンポーネント。 カスタムコンポーネントは、小道具を使用してデータを表示したり、データを使用してコンポーネントをインタラクティブにすることができます。 小道具は、さまざまな状況に適応できるコンポーネントを作成するための重要な部分であり、小道具について学ぶことで、固有の状況を処理できるカスタムコンポーネントを開発するためのツールが得られます。

コンポーネントに小道具を追加した後、次を使用します PropTypes コンポーネントが受け取ると予想されるデータのタイプを定義します。 PropTypes は、実行時にデータが予想される型と一致することを確認するための単純な型システムです。 これらは、ドキュメントとエラーチェッカーの両方として機能し、アプリケーションの拡張時にアプリケーションを予測可能に保つのに役立ちます。

チュートリアルの終わりまでに、さまざまなものを使用します props 一連の動物データを取得し、名前、学名、サイズ、食事、追加情報などの情報を表示する小さなアプリケーションを構築します。

:最初のステップでは、チュートリアル演習を作成するための空白のプロジェクトを設定します。 すでに作業中のプロジェクトがあり、小道具の操作に直接進みたい場合は、ステップ2から始めてください。

前提条件

  • Node.jsを実行する開発環境が必要になります。 このチュートリアルは、Node.jsバージョン10.20.1およびnpmバージョン6.14.4でテストされました。 これをmacOSまたはUbuntu18.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはPPAを使用したインストール]セクションの手順に従います。 Ubuntu18.04にNode.jsをインストールする方法。

  • このチュートリアルに従うには、 Create ReactAppを使用します。 Create React Appを使用してアプリケーションをインストールする手順については、 Create ReactAppを使用してReactプロジェクトをセットアップする方法を参照してください。 このチュートリアルは、Reactチュートリアルでカスタムコンポーネントを作成する方法で学ぶことができるReactコンポーネントの知識も前提としています。

  • また、 JavaScriptでコーディングする方法にあるJavaScriptの基本と、HTMLおよびCSSの基本的な知識も必要です。 HTMLとCSSの優れたリソースは、 Mozilla DeveloperNetworkです。

ステップ1—空のプロジェクトを作成する

このステップでは、 Create ReactAppを使用して新しいプロジェクトを作成します。 次に、プロジェクトをブートストラップするときにインストールされるサンプルプロジェクトと関連ファイルを削除します。 最後に、コンポーネントを整理するための単純なファイル構造を作成します。

まず、新しいプロジェクトを作成します。 コマンドラインで次のスクリプトを実行し、を使用して新しいプロジェクトをインストールします。 create-react-app:

  1. npx create-react-app prop-tutorial

プロジェクトが終了したら、次のディレクトリに移動します。

  1. cd prop-tutorial

新しいターミナルタブまたはウィンドウで、 CreateReactApp開始スクリプトを使用してプロジェクトを開始します。 ブラウザは変更時に自動更新されるため、作業中はこのスクリプトを実行したままにします。

  1. npm start

実行中のローカルサーバーを取得します。 プロジェクトがブラウザウィンドウで開かなかった場合は、 http:// localhost:3000/に移動してプロジェクトを開くことができます。 これをリモートサーバーから実行している場合、アドレスは次のようになります。 http://your_domain:3000.

ブラウザには、CreateReactAppの一部として含まれている単純なReactアプリケーションが読み込まれます。

まったく新しいカスタムコンポーネントのセットを作成します。 空のプロジェクトを作成できるように、ボイラープレートコードをクリアすることから始めます。

開始するには、 src/App.js テキストエディタで。 これは、ページに挿入されるルートコンポーネントです。 すべてのコンポーネントはここから始まります。 あなたはについてのより多くの情報を見つけることができます App.js Create ReactAppを使用してReactプロジェクトを設定する方法。

開ける src/App.js 次のコマンドを使用します。

  1. nano src/App.js

次のようなファイルが表示されます。

prop-tutorial / src / App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

行を削除します import logo from './logo.svg';. 次に、のすべてを置き換えます return 空のタグのセットを返すステートメント: <></>. これにより、何も返さない検証ページが表示されます。 最終的なコードは次のようになります。

prop-tutorial / src / App.js

import React from 'react';
import './App.css';

function App() {
  return <></>;
}

export default App;

テキストエディタを保存して終了します。

最後に、ロゴを削除します。 アプリケーションで使用することはないので、作業中に未使用のファイルを削除する必要があります。 それは将来の混乱からあなたを救うでしょう。

ターミナルウィンドウで、次のコマンドを入力します。

  1. rm src/logo.svg

ブラウザを見ると、空白の画面が表示されます。

サンプルのCreateReactAppプロジェクトをクリアしたので、単純なファイル構造を作成します。 これにより、コンポーネントを分離して独立させることができます。

と呼ばれるディレクトリを作成します components の中に src ディレクトリ。 これにより、すべてのカスタムコンポーネントが保持されます。

  1. mkdir src/components

各コンポーネントには、スタイル、存在する場合は画像、およびテストとともにコンポーネントファイルを保存するための独自のディレクトリがあります。

のディレクトリを作成します App:

  1. mkdir src/components/App

すべてを移動します App そのディレクトリにファイル。 ワイルドカードを使用して、 *、で始まるファイルを選択します App. ファイル拡張子に関係なく。 次に、 mv それらを新しいディレクトリに配置するコマンド。

  1. mv src/App.* src/components/App

最後に、の相対インポートパスを更新します index.js、これはプロセス全体をブートストラップするルートコンポーネントです。

  1. nano src/index.js

importステートメントは、 App.js のファイル App ディレクトリなので、次の強調表示された変更を行います。

prop-tutorial / src / index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App/App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

ファイルを保存して終了します。

プロジェクトが設定されたので、最初のコンポーネントを作成できます。

ステップ2—小道具を使った動的コンポーネントの構築

このステップでは、propsと呼ばれる入力情報に基づいて変更されるコンポーネントを作成します。 小道具は関数またはクラスに渡す引数ですが、コンポーネントはJSXを使用してHTMLのようなオブジェクトに変換されるため、HTML属性のように小道具を渡します。 HTML要素とは異なり、文字列から配列、オブジェクト、さらには関数まで、さまざまなデータ型を渡すことができます。

ここでは、動物に関する情報を表示するコンポーネントを作成します。 このコンポーネントは、動物の名前と学名を文字列として、サイズを整数として、食事を文字列の配列として、追加情報をオブジェクトとして受け取ります。 情報を小道具として新しいコンポーネントに渡し、その情報をコンポーネントで使用します。

このステップの終わりまでに、さまざまな小道具を消費するカスタムコンポーネントができあがります。 また、コンポーネントを再利用して、共通のコンポーネントを使用してデータの配列を表示します。

データの追加

まず、いくつかのサンプルデータが必要です。 でファイルを作成します src/App データと呼ばれるディレクトリ。

  1. touch src/components/App/data.js

テキストエディタで新しいファイルを開きます。

  1. nano src/components/App/data.js

次に、サンプルデータとして使用するオブジェクトの配列を追加します。

prop-tutorial / src / components / App / data.js
export default [
  {
    name: 'Lion',
    scientificName: 'Panthero leo',
    size: 140,
    diet: ['meat'],
  },
  {
    name: 'Gorilla',
    scientificName: 'Gorilla beringei',
    size: 205,
    diet: ['plants', 'insects'],
    additional: {
      notes: 'This is the eastern gorilla. There is also a western gorilla that is a different species.'
    }
  },
  {
    name: 'Zebra',
    scientificName: 'Equus quagga',
    size: 322,
    diet: ['plants'],
    additional: {
      notes: 'There are three different species of zebra.',
      link: 'https://en.wikipedia.org/wiki/Zebra'
    }
  }
]

オブジェクトの配列にはさまざまなデータが含まれており、さまざまな小道具を試す機会が与えられます。 各オブジェクトは、動物の名前、学名、サイズ、食事、およびオプションのフィールドと呼ばれる個別の動物です。 additional、リンクまたはメモが含まれます。 このコードでは、配列を次のようにエクスポートしました default.

ファイルを保存して終了します。

コンポーネントの作成

次に、というプレースホルダーコンポーネントを作成します AnimalCard. このコンポーネントは、最終的に小道具を取り、データを表示します。

まず、ディレクトリを作成します src/components と呼ばれる AnimalCard それから touch と呼ばれるファイル src/components/AnimalCard/AnimalCard.js と呼ばれるCSSファイル src/components/AnimalCard/AnimalCard.css.

  1. mkdir src/components/AnimalCard
  2. touch src/components/AnimalCard/AnimalCard.js
  3. touch src/components/AnimalCard/AnimalCard.css

開ける AnimalCard.js テキストエディタで:

  1. nano src/components/AnimalCard/AnimalCard.js

CSSをインポートして返す基本コンポーネントを追加します <h2> 鬼ごっこ。

prop-tutorial / src / components / AnimalCard / AnimalCard.js
import React from 'react';
import './AnimalCard.css'

export default function AnimalCard() {
  return <h2>Animal</h2>
}

ファイルを保存して終了します。 次に、データとコンポーネントをベースにインポートする必要があります App 成分。

開ける src/components/App/App.js:

  1. nano src/components/App/App.js

データとコンポーネントをインポートしてから、データをループして、配列内の各アイテムのコンポーネントを返します。

prop-tutorial / src / components / App / App.js
import React from 'react';
import data from './data';
import AnimalCard from '../AnimalCard/AnimalCard';
import './App.css';

function App() {
  return (
    <div className="wrapper">
      <h1>Animals</h1>
      {data.map(animal => (
        <AnimalCard key={animal.name}/>
      ))}
    </div>
  )
}

export default App;

ファイルを保存して終了します。 ここでは、 .map()配列メソッドを使用してデータを反復処理します。 このループを追加することに加えて、ラッピングもあります div スタイリングに使用するクラスと <h1> プロジェクトにラベルを付けるためのタグ。

保存すると、ブラウザがリロードされ、各カードのラベルが表示されます。

次に、スタイリングを追加してアイテムを並べます。 開ける App.css:

  1. nano src/components/App/App.css

内容を次のように置き換えて、要素を配置します。

prop-tutorial / src / components / App / App.css
.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
}

.wrapper h1 {
    text-align: center;
    width: 100%;
}

これは、 flexbox を使用してデータを再配置し、データが整列するようにします。 The padding ブラウザウィンドウにいくらかのスペースを与えます。 justify-content 要素間の余分なスペースを広げ、 .wrapper h1 を与える Animal 全幅にラベルを付けます。

ファイルを保存して終了します。 これを行うと、ブラウザが更新され、一部のデータが間隔を空けて表示されます。

小道具の追加

コンポーネントを設定したので、最初の小道具を追加できます。 データをループすると、次の各オブジェクトにアクセスできました。 data 配列とそれに含まれるアイテム。 データの各部分を個別の小道具に追加し、それを使用します AnimalCard 成分。

開ける App.js:

  1. nano src/components/App/App.js

の小道具を追加します nameAnimalCard.

prop-tutorial / src / components / App / App.js
import React from 'react';
...
function App() {
  return (
    <div className="wrapper">
      <h1>Animals</h1>
      {data.map(animal => (
        <AnimalCard
          key={animal.name}
          name={animal.name}
        />
      ))}
    </div>
  )
}

export default App;

ファイルを保存して終了します。 The name propは標準のHTML属性のように見えますが、文字列の代わりに、 name からのプロパティ animal 中括弧内のオブジェクト。

新しいコンポーネントに1つの小道具を渡したので、それを使用する必要があります。 開ける AnimalCard.js:

  1. nano src/components/AnimalCard/AnimalCard.js

コンポーネントに渡すすべての小道具は、関数の最初の引数となるオブジェクトに収集されます。 Destructure 個々の小道具を引き出すためのオブジェクト:

prop-tutorial / src / components / AnimalCard / AnimalCard.js

import React from 'react';
import './AnimalCard.css'

export default function AnimalCard(props) {
  const { name } = props;
  return (
    <h2>{name}</h2>
  );
}

プロップを使用するためにプロップを分解する必要はありませんが、これはこのチュートリアルのサンプルデータを処理するための便利な方法であることに注意してください。

オブジェクトを分解した後、個々のデータを使用できます。 この場合、タイトルを使用します <h2> タグ。値を中括弧で囲み、ReactがJavaScriptとして評価できるようにします。

上のプロパティを使用することもできます prop ドット表記を使用したオブジェクト。 例として、 <h2> このような要素: <h2>{props.title}</h2>. 破棄の利点は、未使用の小道具を収集してオブジェクトレスト演算子を使用できることです。

ファイルを保存して終了します。 これを行うと、ブラウザがリロードされ、プレースホルダーの代わりに各動物の特定の名前が表示されます。

The name プロパティは文字列ですが、propsはJavaScript関数に渡すことができる任意のデータ型にすることができます。 これが機能していることを確認するには、残りのデータを追加します。

を開きます App.js ファイル:

  1. nano src/components/App/App.js

次のそれぞれに小道具を追加します。 scientificName, size, diet、 と additional. これらには、文字列、整数、配列、およびオブジェクトが含まれます。

prop-tutorial / src / components / App / App.js
import React from 'react';
...

function App() {
  return (
    <div className="wrapper">
      <h1>Animals</h1>
      {albums.map(album => (
        <AnimalCard
          additional={animal.additional}
          diet={animal.diet}
          key={animal.name}
          name={animal.name}
          scientificName={animal.scientificName}
          size={animal.size}
        />
      ))}
    </div>
  )
}

export default App;

オブジェクトを作成しているので、好きな順序で追加できます。 アルファベット順にすると、特に大きなリストで小道具のリストを簡単に読み上げることができます。 同じ行に追加することもできますが、1行に1つに分割すると、読みやすくなります。

ファイルを保存して閉じます。 開ける AnimalCard.js.

  1. nano src/components/AnimalCard/AnimalCard.js

今回は、関数パラメーターリストの小道具を分解し、コンポーネントのデータを使用します。

prop-tutorial / src / components / AnimalCard / AnimalCard.js
import React from 'react';
import './AnimalCard.css'

export default function AnimalCard({
  additional,
  diet,
  name,
  scientificName,
  size
}) {
  return (
    <div>
      <h2>{name}</h2>
      <h3>{scientificName}</h3>
      <h4>{size}kg</h4>
      <div>{diet.join(', ')}.</div>
    </div>
  );
}

データを引き出した後、追加することができます scientificNamesize 見出しタグに変換しますが、Reactがページに表示できるように、配列を文字列に変換する必要があります。 join(’、’)を使用してこれを行うことができます。これにより、コンマ区切りのリストが作成されます。

ファイルを保存して閉じます。 これを行うと、ブラウザが更新され、構造化データが表示されます。

あなたはで同様のリストを作成することができます additional オブジェクトですが、代わりにデータでユーザーに警告する関数を追加します。 これにより、関数を小道具として渡し、関数を呼び出すときにコンポーネント内のデータを使用する機会が与えられます。

開ける App.js:

  1. nano src/components/App/App.js

と呼ばれる関数を作成します showAdditionalData オブジェクトを文字列に変換し、アラートとして表示します。

prop-tutorial / src / components / App / App.js
import React from 'react';
...

function showAdditional(additional) {
  const alertInformation = Object.entries(additional)
    .map(information => `${information[0]}: ${information[1]}`)
    .join('\n');
  alert(alertInformation)
};

function App() {
  return (
    <div className="wrapper">
      <h1>Animals</h1>
      {data.map(animal => (
        <AnimalCard
          additional={animal.additional}
          diet={animal.diet}
          key={animal.name}
          name={animal.name}
          scientificName={animal.scientificName}
          showAdditional={showAdditional}
          size={animal.size}
        />
      ))}
    </div>
  )
}

export default App;

関数 showAdditional オブジェクトをペアの配列に変換します。最初の項目がキーで、2番目の項目が値です。 次に、キーペアを文字列に変換するデータにマッピングします。 次に、改行でそれらを結合します—\n-完全な文字列をアラート機能に渡す前。

JavaScriptは関数を引数として受け入れることができるため、Reactは関数を小道具として受け入れることもできます。 したがって、合格することができます showAdditionalAnimalCard と呼ばれる小道具として showAdditional.

ファイルを保存して閉じます。 開ける AnimalCard:

  1. nano src/components/AnimalCard/AnimalCard.js

引っ張る showAdditional 小道具オブジェクトから関数を作成し、 <button> onClickイベントで関数を呼び出します。 additional 物体:

prop-tutorial / src / components / AnimalCard / AnimalCard.js
import React from 'react';
import './AnimalCard.css'

export default function AnimalCard({
  additional,
  diet,
  name,
  scientificName,
  showAdditional,
  size
}) {
  return (
    <div>
      <h2>{name}</h2>
      <h3>{scientificName}</h3>
      <h4>{size}kg</h4>
      <div>{diet.join(', ')}.</div>
      <button onClick={() => showAdditional(additional)}>More Info</button>
    </div>
  );
}

ファイルを保存します。 これを行うと、ブラウザが更新され、各カードの後にボタンが表示されます。 ボタンをクリックすると、追加データを含むアラートが表示されます。

詳細をクリックしてみてください Lion、エラーが発生します。 これは、ライオンの追加データがないためです。 ステップ3でそれを修正する方法を見るでしょう。

最後に、ミュージックカードにスタイリングを追加します。 追加する classNameanimal-wrapper のdivに AnimalCard:

prop-tutorial / src / components / AnimalCard / AnimalCard.js
import React from 'react';
import './AnimalCard.css'

export default function AnimalCard({
...
  return (
    <div className="animal-wrapper">
...
    </div>
  )
}

ファイルを保存して閉じます。 開ける AnimalCard.css:

  1. nano src/components/AnimalCard/AnimalCard.css

CSSを追加して、カードとボタンに小さな境界線とパディングを付けます。

prop-tutorial / src / components / AnimalCard / AnimalCard.css
.animal-wrapper {
    border: solid black 1px;
    margin: 10px;
    padding: 10px;
    width: 200px;
}

.animal-wrapper button {
    font-size: 1em;
    border: solid black 1px;
    padding: 10;
    background: none;
    cursor: pointer;
    margin: 10px 0;
}

このCSSは、カードにわずかな境界線を追加し、デフォルトのボタンスタイルを境界線とパディングに置き換えます。 cursor: pointer ボタンにカーソルを合わせるとカーソルが変わります。

ファイルを保存して閉じます。 これを行うと、ブラウザが更新され、個々のカードにデータが表示されます。

この時点で、2つのカスタムコンポーネントを作成しました。 小道具を使用して、最初のコンポーネントから2番目のコンポーネントにデータを渡しました。 小道具には、文字列、整数、配列、オブジェクト、関数などのさまざまなデータが含まれていました。 2番目のコンポーネントでは、小道具を使用してJSXを使用して動的コンポーネントを作成しました。

次のステップでは、と呼ばれる型システムを使用します prop-types コンポーネントが期待する構造を指定します。これにより、アプリの予測可能性が高まり、バグが防止されます。

ステップ3—で予測可能な小道具を作成する PropTypesdefaultProps

このステップでは、ライトタイプのシステムをコンポーネントに追加します。 PropTypes. PropTypes 特定の小道具に対して受け取ると予想されるデータのタイプを明示的に定義することにより、他のタイプのシステムのように機能します。 また、小道具が常に必要とされない場合に、デフォルトのデータを定義する機会も与えられます。 ほとんどの型システムとは異なり、 PropTypes はランタイムチェックであるため、小道具がタイプと一致しない場合でも、コードはコンパイルされますが、コンソールエラーも表示されます。

このステップの終わりまでに、各小道具のタイプを定義することにより、カスタムコンポーネントに予測可能性を追加します。 これにより、コンポーネントで次に作業する人が、コンポーネントに必要なデータの構造を明確に把握できるようになります。

The prop-types パッケージはCreateReactAppインストールの一部として含まれているため、それを使用するには、コンポーネントにインポートするだけです。

開く AnimalCard.js:

  1. nano src/components/AnimalCard/AnimalCard.js

次にインポート PropTypes から prop-types:

prop-tutorial / src / components / AnimalCard / AnimalCard.js
import React from 'react';
import PropTypes from 'prop-types';
import './AnimalCard.css'

export default function AnimalCard({
...
}

追加 PropTypes コンポーネント関数に直接。 JavaScriptでは、関数はオブジェクトです。つまり、ドット構文を使用してプロパティを追加できます。 以下を追加します PropTypesAnimalCard.js:

prop-tutorial / src / components / AnimalCard / AnimalCard.js
import React from 'react';
import PropTypes from 'prop-types';
import './AnimalCard.css'

export default function AnimalCard({
...
}
  
AnimalCard.propTypes = {
  additional: PropTypes.shape({
    link: PropTypes.string,
    notes: PropTypes.string
  }),
  diet: PropTypes.arrayOf(PropTypes.string).isRequired,
  name: PropTypes.string.isRequired,
  scientificName: PropTypes.string.isRequired,
  showAdditional: PropTypes.func.isRequired,
  size: PropTypes.number.isRequired,
}

ファイルを保存して閉じます。

ご覧のとおり、さまざまなものがあります PropTypes. これはほんの小さなサンプルです。 公式のReactドキュメントを参照して、使用できる他のドキュメントを確認してください。

から始めましょう name 小道具。 ここでは、それを指定しています name である必要があります string. プロパティ scientificName 同じです。 sizenumber、次のような両方のフロートを含めることができます 1.5 およびなどの整数 6. showAdditional 関数です(func).

diet一方、は少し異なります。 この場合、あなたはそれを指定しています diet になります array、ただし、この配列に含まれる内容も指定する必要があります。 この場合、配列には文字列のみが含まれます。 タイプをミックスしたい場合は、別の小道具を使用できます oneOfType、有効な配列を取ります PropTypes. 使用できます oneOfType どこでも、あなたが望むなら size 数字または文字列にするには、次のように変更できます。

size: PropTypes.oneOfType([PropTypes.number, PropTypes.string])

小道具 additional また、もう少し複雑です。 この場合、オブジェクトを指定していますが、もう少し明確にするために、オブジェクトに何を含めるかを指定しています。 そのためには、 PropTypes.shape、独自のフィールドを必要とする追加のフィールドを持つオブジェクトを取得します PropTypes. この場合、 linknotes 両方とも PropTypes.string.

現在、すべてのデータは整形式であり、小道具と一致しています。 次の場合に何が起こるかを確認するには PropTypes 一致しない場合は、データを開きます。

  1. nano src/components/App/data.js

最初のアイテムのサイズを文字列に変更します。

prop-tutorial / src / components / App / data.js
export default [
  {
    name: 'Lion',
    scientificName: 'Panthero leo',
    size: '140',
    diet: ['meat'],
  },
...
]

ファイルを保存します。 これを行うと、ブラウザが更新され、コンソールにエラーが表示されます。

Error
index.js:1 Warning: Failed prop type: Invalid prop `size` of type `string` supplied to `AnimalCard`, expected `number`. in AnimalCard (at App.js:18) in App (at src/index.js:9) in StrictMode (at src/index.js:8)

TypeScript などの他の型システムとは異なり、 PropTypes ビルド時に警告は表示されず、コードエラーがない限り、コンパイルされます。 これは、propエラーのあるコードを誤って公開する可能性があることを意味します。

データを正しいタイプに戻します。

prop-tutorial / src / components / App / data.js
export default [
  {
    name: 'Lion',
    scientificName: 'Panthero leo',
    size: 140,
    diet: ['meat'],
  },
...
]

ファイルを保存して閉じます。

開く AnimalCard.js:

  1. nano src/components/AnimalCard/AnimalCard.js

を除くすべての小道具 additional 持っている isRequired 財産。 つまり、それらは必須です。 必要なpropを含めない場合でも、コードはコンパイルされますが、コンソールにランタイムエラーが表示されます。

小道具が必要ない場合は、デフォルト値を追加できます。 小道具が必要ない場合は、ランタイムエラーを防ぐために、常にデフォルト値を追加することをお勧めします。 たとえば、 AnimalCard コンポーネント、あなたはで関数を呼び出しています additional データ。 存在しない場合、関数は存在しないオブジェクトを変更しようとし、アプリケーションがクラッシュします。

この問題を防ぐには、 defaultProp 為に additional:

prop-tutorial / src / components / AnimalCard / AnimalCard.js
import React from 'react';
import PropTypes from 'prop-types';
import './AnimalCard.css'

export default function AnimalCard({
...
}

AnimalCard.propTypes = {
  additional: PropTypes.shape({
    link: PropTypes.string,
    notes: PropTypes.string
  }),
...
}

AnimalCard.defaultProps = {
  additional: {
    notes: 'No Additional Information'
  }
}

追加します defaultProps と同じようにドット構文を使用して関数に propTypes、次に、小道具が undefined. この場合、あなたはの形に一致しています additional、追加情報がないというメッセージを含みます。

ファイルを保存して閉じます。 これを行うと、ブラウザが更新されます。 更新したら、Lion詳細ボタンをクリックします。 ありません additional データのフィールドなので、小道具は undefined. しかし AnimalCard デフォルトの小道具に置き換えます。

これで、小道具は十分に文書化され、予測可能なコードを確保するために必要であるか、デフォルトがあります。 これは、将来の開発者(自分自身を含む)がコンポーネントに必要な小道具を理解するのに役立ちます。 コンポーネントが受信したデータをどのように使用するかについての完全な情報を提供することにより、コンポーネントの交換と再利用が容易になります。

結論

このチュートリアルでは、親からの情報を表示するために小道具を使用するいくつかのコンポーネントを作成しました。 小道具を使用すると、大きなコンポーネントをより小さく、より焦点を絞った部分に分割し始める柔軟性が得られます。 データと表示情報が緊密に結合されなくなったため、アプリケーションをセグメント化する方法を選択できます。

小道具は、複雑なアプリケーションを構築する上で重要なツールであり、受信するデータに適応できるコンポーネントを作成する機会を提供します。 と PropTypes、予測可能で読み取り可能なコンポーネントを作成しているため、チームはお互いの作業を再利用して、柔軟で安定したコードベースを作成できます。 その他のReactチュートリアルをご覧になりたい場合は、 Reactトピックページをご覧になるか、React.jsシリーズのコーディング方法ページに戻ってください。