React - 機能コンポーネントのデフォルトの小道具を設定する

React では、props を使用して親コンポーネントから子コンポーネントに値を渡します。 機能コンポーネントを作成するとき、props として渡された値の一部が存在しない可能性があることを考慮する必要があります。

これは、デフォルトの props が必要な場所です。 今日のチュートリアルでは、2つのアプローチを使用して、React の機能コンポーネントにデフォルトの props を設定する方法を示します。

React - 機能コンポーネントのデフォルト props を設定する

React の機能コンポーネントにデフォルトの props を設定するには、2つの方法があります。 ここでは、両方の方法について説明および学習し、どちらを使用するのが適しているかを強調します。

関数定義でデフォルト パラメータを設定する

最初のアプローチは、JavaScript のデフォルト パラメーター機能を使用することです。 以下の例を見てみましょう。

export default function App() {
  return (
    <div className="App">
      <Child firstName="George" lastName="Smith" />
    </div>
  );
}
function Child({ firstName = "Irakli", lastName = "Tchigladze" }) {
  return (
    <div className="App">
      <h1>{firstName + " " + lastName}</h1>
    </div>
  );
}

上記の例のように、親コンポーネントが firstName と lastName props を渡す場合、親コンポーネントで指定された値はデフォルト値を置き換えます。

これらの props が渡されない場合、子コンポーネントはデフォルト パラメータとして設定された値を使用します。

ここで、<Child /> コンポーネントに設定された props を削除してみてください。 子コンポーネントは、ページにテキストをレンダリングするためにこれらの値を必要とします。

デフォルトのパラメータを設定しなかった場合、必要な値を渡さないと、firstName is not defined のようなエラーが発生します。

デフォルトのパラメータを設定すると、このエラーを回避できます。 代わりに、<Child> コンポーネントがこれらの変数をデフォルトのパラメータに置き換えます。

defaultProps パラメータを使用してデフォルト パラメータを設定する

デフォルト値を設定する別の方法は、defaultProps プロパティを使用することです。 このメソッドを使用して前の例を書き直してみましょう。

const Child = ({ firstName = "Irakli", lastName = "Tchigladze" }) => {
  return (
    <div className="App">
      <h1>{firstName + " " + lastName}</h1>
    </div>
  );
};

Child.defaultProps = { firstName: "Irakli", lastName: "Tchigladze" };

この場合、defaultProps プロパティを別のオブジェクトに等しく設定します。 親コンポーネントから props が渡されない場合、子コンポーネントはデフォルトでこのオブジェクトになります。

この構文は比較的単純ですが、コードを数行追加する必要があります。

しかし、より大きな問題は、React の背後にいる著名な人物の 1 人である Dan Abramov によると、defaultProps プロパティに対する機能コンポーネントのサポートが非推奨になることです。

プロジェクトの長期的な安定性を気にする必要があると思われる場合は、defaultProps プロパティを使用してデフォルトの props を設定するよりも、デフォルトのパラメーターを使用することをお勧めします。