Reactのpropsの基礎知識！インライン、オブジェクト、デストラクチャリング、スプレッド演算子
React で props を渡すためのショートカット
インライン props
最も基本的なショートカットは、インライン props を使用することです。これは、props をコンポーネントタグの属性として直接指定することを意味します。
<MyComponent name="John" age={30} />
この例では、MyComponent コンポーネントに 2 つの props が渡されます: name は "John" で、age は 30 です。
オブジェクト props
より多くの props を渡す必要がある場合は、オブジェクト props を使用できます。これは、props をオブジェクトとして指定することを意味します。
<MyComponent
name="John"
age={30}
occupation="Software Engineer"
/>
この例では、MyComponent コンポーネントに 3 つの props が渡されます: name は "John" で、age は 30 で、occupation は "Software Engineer" です。
デストラクチャリング
オブジェクト props をより簡潔に記述するには、デストラクチャリングを使用できます。これは、props オブジェクトのプロパティを個別の変数に抽出することを意味します。
const { name, age, occupation } = props;
<MyComponent
name={name}
age={age}
occupation={occupation}
/>
この例では、props オブジェクトのプロパティ name、age、occupation が個別の変数に抽出されます。その後、これらの変数は MyComponent コンポーネントに props として渡されます。
スプレッド演算子
複数のオブジェクトを props として渡す必要がある場合は、スプレッド演算子を使用できます。これは、オブジェクトのプロパティを個々の props として展開することを意味します。
const userData = {
name: "John",
age: 30,
occupation: "Software Engineer"
};
<MyComponent {...userData} />
この例では、userData オブジェクトのプロパティが個々の props として MyComponent コンポーネントに展開されます。
これらのショートカットは、React で props を渡すための最も一般的な方法です。これらのショートカットを使用すると、コードをより簡潔で読みやすくすることができます。
- props の検証を使用して、props の型と値が正しいことを確認できます。
- 必須 props を使用して、特定の props が渡されることを確認できます。
- デフォルト props を使用して、props の値がない場合にデフォルト値を設定できます。
import React from 'react';
function Greeting(props) {
return (
<h1>こんにちは、{props.name}さん！</h1>
);
}
export default function App() {
return (
<div>
<Greeting name="John" />
<Greeting name="Jane" />
</div>
);
}
このコードでは、Greeting コンポーネントは name props を受け取ります。App コンポーネントは 2 回 Greeting コンポーネントをレンダリングし、それぞれ異なる name props を渡します。
import React from 'react';
function User(props) {
return (
<div>
<h1>{props.name}</h1>
<p>年齢: {props.age}</p>
<p>職業: {props.occupation}</p>
</div>
);
}
export default function App() {
return (
<div>
<User
name="John Doe"
age={30}
occupation="Software Engineer"
/>
<User
name="Jane Doe"
age={25}
occupation="Designer"
/>
</div>
);
}
このコードでは、User コンポーネントは name、age、occupation の 3 つの props を受け取ります。App コンポーネントは 2 回 User コンポーネントをレンダリングし、それぞれ異なる props を渡します。
import React from 'react';
function User({ name, age, occupation }) {
return (
<div>
<h1>{name}</h1>
<p>年齢: {age}</p>
<p>職業: {occupation}</p>
</div>
);
}
export default function App() {
const users = [
{ name: "John Doe", age: 30, occupation: "Software Engineer" },
{ name: "Jane Doe", age: 25, occupation: "Designer" },
];
return (
<div>
{users.map((user) => (
<User key={user.name} {...user} />
))}
</div>
);
}
このコードでは、User コンポーネントは name、age、occupation の 3 つの props を受け取ります。App コンポーネントは users 配列を反復処理し、各ユーザーオブジェクトを User コンポーネントに props として渡します。
import React from 'react';
function UserDetails(props) {
return (
<div>
<h1>{props.name}</h1>
<p>年齢: {props.age}</p>
<p>職業: {props.occupation}</p>
</div>
);
}
function Address(props) {
return (
<div>
<p>住所: {props.street}</p>
<p>市区町村: {props.city}</p>
<p>郵便番号: {props.postalCode}</p>
</div>
);
}
export default function App() {
const user = {
name: "John Doe",
age: 30,
occupation: "Software Engineer",
address: {
street: "123 Main Street",
city: "Anytown",
postalCode: "12345",
},
};
return (
<div>
<UserDetails {...user} />
<Address {...user.address} />
</div>
);
}
高階コンポーネントは、既存のコンポーネントをラップして、新しい機能を追加するのに役立ちます。 props を渡すために高階コンポーネントを使用することもできます。
import React from 'react';
const withData = (Component) => {
const data = { name: "John Doe", age: 30 };
return (props) => (
<Component {...props} data={data} />
);
};
function Greeting(props) {
const { name, data } = props;
return (
<h1>こんにちは、{name}さん！ {data.age}歳ですね。</h1>
);
}
export default function App() {
const WrappedGreeting = withData(Greeting);
return (
<div>
<WrappedGreeting />
</div>
);
}
この例では、withData という高階コンポーネントが定義されています。このコンポーネントは、ラップされたコンポーネントに data props を渡します。App コンポーネントは withData を使用して Greeting コンポーネントをラップし、data props を渡します。
Context
Context は、コンポーネントツリー全体でデータを共有するのに役立ちます。 props を渡すために Context を使用することもできます。
import React, { useContext } from 'react';
const UserContext = React.createContext();
function UserProvider({ children }) {
const user = { name: "John Doe", age: 30 };
return (
<UserContext.Provider value={user}>
{children}
</UserContext.Provider>
);
}
function Greeting() {
const user = useContext(UserContext);
const { name, age } = user;
return (
<h1>こんにちは、{name}さん！ {age}歳ですね。</h1>
);
}
export default function App() {
return (
<UserProvider>
<Greeting />
</UserProvider>
);
}
この例では、UserContext という Context が定義されています。UserProvider コンポーネントは、UserContext に値を提供します。Greeting コンポーネントは useContext フックを使用して UserContext から値を取得します。
カスタムフック
カスタムフックは、コンポーネントロジックを再利用するのに役立ちます。 props を渡すためにカスタムフックを使用することもできます。
import React, { useState } from 'react';
function useUser() {
const [user, setUser] = useState({ name: "John Doe", age: 30 });
return [user, setUser];
}
function Greeting({ user }) {
const { name, age } = user;
return (
<h1>こんにちは、{name}さん！ {age}歳ですね。</h1>
);
}
export default function App() {
const [user, setUser] = useUser();
return (
<div>
<Greeting user={user} />
<button onClick={() => setUser({ name: "Jane Doe", age: 25 })}>
ユーザーを変更
</button>
</div>
);
}
この例では、useUser というカスタムフックが定義されています。このフックは、user オブジェクトとそれを更新するための関数を含む配列を返します。App コンポーネントは useUser フックを使用して user 状態とそれを更新するための関数を取得します。Greeting コンポーネントは user props を受け取り、名前と年齢を表示します。
これらの方法は、React で props を渡すためのより高度な方法です。これらの方法は、より複雑なアプリケーションで役立ちます。
React で props を渡すには、さまざまな方法があります。それぞれの方法には長所と短所があり、状況に応じて最適な方法を選択する必要があります。
- 高階コンポーネント、Context、カスタムフックは、より複雑なアプリケーションで props を渡すためのより高度な方法です。
- デストラクチャリングとスプレッド演算子は、より複雑な props を渡すためのより簡潔な方法です。
- インライン props とオブジェクト props は、単純な props を渡すための最も簡単な方法です。
reactjs
