React props
propsは、Reactコンポーネントに渡される引数です。
propsは、HTML属性を介してコンポーネントに渡されます。
propsプロパティを表します。
Reactプロップ
React Propsは、JavaScriptの関数の引数やHTML の属性に似ています。
プロパティをコンポーネントに送信するには、HTML属性と同じ構文を使用します。
例
「Car要素に「ブランド」属性を追加します。
const myElement = <Car brand="Ford" />;
コンポーネントは引数をpropsオブジェクトとして受け取ります。
例
コンポーネントでbrand属性を使用します。
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
データを渡す
propsは、パラメーターとして、あるコンポーネントから別のコンポーネントにデータを渡す方法でもあります。
例
「ブランド」プロパティをGarageコンポーネントからCarコンポーネントに送信します。
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand="Ford" />
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
上記の例のように文字列ではなく、送信する変数がある場合は、変数名を中括弧で囲みます。
例
carNameという名前の変数を作成し、それをCarコンポーネントに送信します。
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
function Garage() {
const carName = "Ford";
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={ carName } />
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
または、オブジェクトの場合:
例
carInfoという名前のオブジェクトを作成し、それをCarコンポーネントに送信します。
function Car(props) {
return <h2>I am a { props.brand.model }!</h2>;
}
function Garage() {
const carInfo = { name: "Ford", model: "Mustang" };
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={ carInfo } />
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
ノート：React Propsは読み取り専用です。それらの値を変更しようとすると、エラーが発生します。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。