小道具に反応する
小道具は、Reactコンポーネントに渡される引数です。
小道具は、HTML属性を介してコンポーネントに渡されます。
props プロパティの略です。
小道具に反応する
React Propsは、JavaScriptの関数の引数やHTMLの属性に似ています。
小道具をコンポーネントに送信するには、HTML属性と同じ構文を使用します。
例
Car要素に「brand」属性を追加します。
const myelement = <Car brand="Ford" />;コンポーネントは引数をpropsオブジェクトとして受け取ります。
例
コンポーネントでbrand属性を使用します。
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
データを渡す
小道具は、パラメータとして、あるコンポーネントから別のコンポーネントにデータを渡す方法でもあります。
例
「brand」プロパティを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" />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
上記の例のように文字列ではなく、送信する変数がある場合は、変数名を中括弧で囲むだけです。
例
名前の付いた変数を作成し、それをコンポーネント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 } />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
またはそれがオブジェクトだった場合：
例
名前の付いたオブジェクトを作成し、それをコンポーネント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 } />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
注： Reactプロップは読み取り専用です！それらの値を変更しようとすると、エラーが発生します。