[React.js] - パート4: React props
Ace Lennox
Reactのprops（プロパティ）は、コンポーネント間でデータを渡すために使用されます。JavaScriptの関数引数と同じように機能し、コンポーネントを再利用可能で動的にするために重要な役割を果たします。このガイドでは、Reactのpropsを簡単な例を使って説明します。
ReactのPropsとは？
Reactのpropsの特徴:
引数: HTMLのような属性を使用してコンポーネントに渡されます。
読み取り専用: propsは受け取ったコンポーネント内で変更することはできません。
基本構文
コンポーネントにpropsを渡すには、HTML属性と同じ構文を使用します:
const myElement = <Car brand="トヨタ" />; コンポーネントは、propsをオブジェクトとして受け取ります:
function Car(props) {
return <h2>私は{props.brand}を運転します！</h2>;
}
例1: 静的なpropsを渡す
次の例では、Carコンポーネントにbrandというpropsを渡します。
import ReactDOM from "react-dom/client";
function Car(props) {
return <h2>私は{props.brand}を運転します！</h2>;
}
function Garage() {
return (
<div>
<h1>私のガレージへようこそ</h1>
<Car brand="トヨタ" />
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Garage />);
この例では、Garageコンポーネントがbrandの値をCarコンポーネントに渡します。
例2: 変数をpropsとして渡す
propsには変数を渡すこともできるため、コンポーネントを動的にすることができます。
function Car(props) {
return <h2>私は{props.brand}を運転します！</h2>;
}
function Garage() {
const carName = "ホンダ";
return (
<div>
<h1>私のガレージへようこそ</h1>
<Car brand={carName} />
</div>
);
}
この例では、変数carNameがCarコンポーネントにbrandとして渡されます。
例3: オブジェクトをpropsとして渡す
より複雑なデータを渡す場合、オブジェクトをpropsとして渡すことができます。
function Car(props) {
return <h2>私は{props.details.model}（メーカー: {props.details.brand}）を運転します！</h2>;
}
function Garage() {
const carDetails = { brand: "フォード", model: "マスタング" };
return (
<div>
<h1>私のガレージへようこそ</h1>
<Car details={carDetails} />
</div>
);
}
この例では、CarコンポーネントはオブジェクトcarDetailsからbrandとmodelを使用します。
Propsのルール
読み取り専用: propsは受け取ったコンポーネント内で変更できません。変更しようとするとエラーが発生します。
動的な値: propsには、変数、オブジェクト、配列、または有効なJavaScript式を
{}で囲んで渡すことができます。コンポーネントの再利用性: propsを使用することで、柔軟で再利用可能なコンポーネントを作成できます。
まとめ
Propsは、Reactでコンポーネントに動的データを渡し、再利用可能にするための重要な機能です。文字列、変数、オブジェクトなどを渡すことで、コンポーネントを柔軟で強力なものにできます。
この記事の例を試して、Reactのpropsがどのようにコンポーネントを動的かつ柔軟にするかを体感してみてください！
ソースコード
このプロジェクトの完全なソースコードはGitHubで利用可能です。