小道具でReactコンポーネントをカスタマイズする方法

著者は、 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を使用して新しいプロジェクトをインストールします。

npx create-react-app prop-tutorial

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

cd prop-tutorial

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

npm start

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

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

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

まず、テキストエディタでsrc/App.jsを開きます。これは、ページに挿入されるルートコンポーネントです。すべてのコンポーネントはここから始まります。 App.jsの詳細については、 Create ReactAppを使用してReactプロジェクトをセットアップする方法を参照してください。

次のコマンドでsrc/App.jsを開きます。

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;

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

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

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

rm src/logo.svg

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

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

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

mkdir src/components

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

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

mkdir src/components/App

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

mv src/App.* src/components/App

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

nano src/index.js

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

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ディレクトリにdataというファイルを作成します。

touch src/components/App/data.js

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

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というファイルとsrc/components/AnimalCard/AnimalCard.cssというCSSファイルを作成します。

mkdir src/components/AnimalCard
touch src/components/AnimalCard/AnimalCard.js
touch src/components/AnimalCard/AnimalCard.css

テキストエディタでAnimalCard.jsを開きます。

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を開きます：

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（）配列メソッドを使用してデータを反復処理します。このループを追加することに加えて、スタイリングに使用するクラスとプロジェクトにラベルを付けるための<h1>タグを含むラッピングdivもあります。

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

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

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

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

小道具の追加

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

App.jsを開きます：

nano src/components/App/App.js

nameの小道具をAnimalCardに追加します。

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;

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

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

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>。破棄の利点は、未使用の小道具を収集してオブジェクトレスト演算子を使用できることです。

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

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

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

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を開きます。

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

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

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

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

App.jsを開きます：

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は関数を小道具として受け入れることもできます。したがって、showAdditionalをshowAdditionalという小道具としてAnimalCardに渡すことができます。

ファイルを保存して閉じます。 AnimalCardを開きます：

nano src/components/AnimalCard/AnimalCard.js

propsオブジェクトからshowAdditional関数をプルし、additionalオブジェクトで関数を呼び出すonClickイベントで<button>を作成します。

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でそれを修正する方法を見るでしょう。

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

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を開きます：

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—`PropTypes`および`defaultProps`を使用して予測可能な小道具を作成する

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

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

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

AnimalCard.jsを開きます：

nano src/components/AnimalCard/AnimalCard.js

次に、prop-typesからPropTypesをインポートします。

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では、関数はオブジェクトです。つまり、ドット構文を使用してプロパティを追加できます。次のPropTypesをAnimalCard.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は同じです。 sizeはnumberであり、1.5などの浮動小数点数と6などの整数の両方を含めることができます。 showAdditionalは関数（func）です。

一方、dietは少し異なります。この場合、dietがarrayになるように指定していますが、この配列に含まれる内容も指定する必要があります。この場合、配列には文字列のみが含まれます。タイプを混在させたい場合は、oneOfTypeと呼ばれる別の小道具を使用できます。これは、有効なPropTypesの配列を取ります。 oneOfTypeはどこでも使用できるため、sizeを数値または文字列にする場合は、次のように変更できます。

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

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

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

nano src/components/App/data.js

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

prop-tutorial / src / components / App / data.js

export default [
  {
    name: 'Lion',
    scientificName: 'Panthero leo',
    size: '140',
    diet: ['meat'],
  },
...
]

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

Errorindex.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を開きます：

nano src/components/AnimalCard/AnimalCard.js

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

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

この問題を防ぐには、additionalにdefaultPropを追加します。

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'
  }
}

propTypesの場合と同じように、ドット構文を使用してdefaultPropsを関数に追加し、小道具がundefinedの場合にコンポーネントが使用するデフォルト値を追加します。この場合、追加情報がないというメッセージを含め、additionalの形状に一致しています。

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

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

結論

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

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

小道具でReactコンポーネントをカスタマイズする方法

序章

前提条件

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

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

データの追加

コンポーネントの作成

小道具の追加

ステップ3—PropTypesおよびdefaultPropsを使用して予測可能な小道具を作成する

結論

ステップ3—`PropTypes`および`defaultProps`を使用して予測可能な小道具を作成する