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 を設定するよりも、デフォルトのパラメーターを使用することをお勧めします。
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn