React でオブジェクトの配列をループする
- JSX でオブジェクトの配列をループする
-
.map()を使用して React でオブジェクトの配列をループする -
forEach()を使用して、React でオブジェクトの配列をループ処理する -
forを使用して React でオブジェクトの配列をループする
React は、高速で強力な Web アプリケーションを構築するために必要なすべての機能を開発者に提供するため、人気のあるフロントエンド フレームワークです。
JSX でオブジェクトの配列をループする
JSX は React のデフォルトのテンプレート言語です。 これは HTML によく似ていますが、実際には JavaScript コードを記述するための便利な方法にすぎません。
このため、React 開発者は、中括弧を使用して JavaScript 式をマークする限り、JSX 内で一般的な JavaScript メソッドを使用できます。
.map() を使用して React でオブジェクトの配列をループする
通常、フロントエンド開発者は、外部ソースから受け取ったデータを表示するために美しいユーザー インターフェイスを構築する必要があります。 データはさまざまな方法でフォーマットできます。
ただし、投稿、製品リスト、または同様のアイテムのデータがある場合、ほとんどの場合、オブジェクトの配列としてフォーマットされます。 各オブジェクトには、アイテムに関する情報 (タイトル、メイン コンテンツ、メタ タグ、ヘッド ピクチャなど) が含まれます。
React 開発者は、オブジェクトの配列を簡単にループできます。 .map() JavaScript メソッドを使用する必要があります。このメソッドは、配列内のすべてのアイテムを調べ、変更された各アイテムを出力します。
例を見てみましょう。
export default function App() {
const postsArray = [
{
title: "How to Learn React",
content:
"React is built on JavaScript, so there is no escaping learning how to code in JavaScript. You need to know the basics of JavaScript and have a good knowledge of HTML and CSS to get started with React. "
},
{
title: "How to Learn Vue",
content:
"First, learn the essentials of Vue 2.0 by going through the main concepts and syntax. Then, build your first single-page app with Vue. "
},
{
title: "How to Learn HTML",
content:
"Codecademy has numerous free programs to provide you with the technical skills you need. ...Learn-HTML.org is a reliable source for everything you need to know about HTML."
}
];
return (
<div className="App">
<h1>Coding Blog</h1>
{postsArray.map((post) => {
return <Post post={post}></Post>;
})}
</div>
);
}
function Post(props) {
return (
<div>
<h1>{props.post.title}</h1>
<p>{props.post.content}</p>
</div>
);
}
ここには、親 <App> コンポーネントと子 <Post> コンポーネントの 2つのコンポーネントがあります。 親コンポーネントでは、postsArray 変数を定義して、API から受け取る可能性のある外部データをシミュレートします。
私たちのアプリはかなり単純です: メインの <App> コンポーネントには、ブログのヘッダーがあります。 また、.map() メソッドを使用して、配列内の各項目を確認します。
前述したように、.map() メソッドを使用すると、各アイテムの修正バージョンを出力できます。 この場合、各アイテムは投稿データ (タイトルとコンテンツ) を含むオブジェクトです。
各オブジェクトを取得し、小道具として <Post> コンポーネントに渡します。
子コンポーネントの props を介して受け取ったデータにアクセスし、ヘッダーと段落として表示します。
CodeSandbox のライブ デモ を見ると、.map() メソッドが 3つの <Post> コンポーネントを返すことがわかります。 配列内のオブジェクトごとに 1つのコンポーネント。
.map() 関数の構文を確認することが重要です。 配列を含む変数を参照できるように、開き中かっこと閉じ中かっこを記述することから始めます。
次に、配列で .map() メソッドを呼び出し、その引数 (配列内の各項目を処理するためのコールバック関数) を提供します。 最後に、JSX または HTML 要素を返すときは、配列の各項目 (オブジェクト) のデータを使用して、返された各要素のコンテンツを埋める必要があります。
forEach() を使用して、React でオブジェクトの配列をループ処理する
forEach() 配列メソッドは、冗長な for ループを記述する代わりの方法を提供します。 Reactでも使えます。
forEach() は HTML 要素を返すことはできませんが、HTML 要素を生成して配列に挿入することはできます。 次に、JSX 内でその配列を参照して、作成した要素を表示できます。
export default function App() {
const postsArray = [
{
title: "How to Learn React",
content:
"React is built on JavaScript, so there is no escaping learning how to code in JavaScript. You need to know the basics of JavaScript and have a good knowledge of HTML and CSS to get started with React. "
},
{
title: "How to Learn Vue",
content:
"First, learn the essentials of Vue 2.0 by going through the main concepts and syntax. Then, build your first single-page app with Vue. "
},
{
title: "How to Learn HTML",
content:
"Codecademy has numerous free programs to provide you with the technical skills you need. ...Learn-HTML.org is a reliable source for everything you need to know about HTML."
}
];
const posts = []
postsArray.forEach(post => posts.push(<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>)
)
return (
<div className="App">
<h1>Coding Blog</h1>
{posts}
</div>
);
}
for を使用して React でオブジェクトの配列をループする
for ステートメントは、JavaScript でオブジェクトの配列をループする主な方法です。 ただし、JSX 内の要素をレンダリングするために使用することはできません。 このため、JSX の外で for ループを定義する必要があります。
たとえば、前の例と同じ投稿の配列があるとします。
export default function App() {
const postsArray = [
{
title: "How to Learn React",
content:
"React is built on JavaScript, so there is no escaping learning how to code in JavaScript. You need to know the basics of JavaScript and have a good knowledge of HTML and CSS to get started with React. "
},
{
title: "How to Learn Vue",
content:
"First, learn the essentials of Vue 2.0 by going through the main concepts and syntax. Then, build your first single-page app with Vue. "
},
{
title: "How to Learn HTML",
content:
"Codecademy has numerous free programs to provide you with the technical skills you need. ...Learn-HTML.org is a reliable source for everything you need to know about HTML."
}
];
const posts = []
for (let i = 0; i < postsArray.length; i++){
posts.push(<div>
<h1>{postsArray[i].title}</h1>
<p>{postsArray[i].content}</p>
</div>)
}
return (
<div className="App">
<h1>Coding Blog</h1>
{posts}
</div>
);
}
この例では、postArray 変数内のすべての項目を反復して HTML 要素を作成します。 新しく作成された posts 配列に HTML 要素をプッシュします。
JSX では for ループを使用できません。 代わりに、postArray 状態変数のデータを使用して生成した HTML 要素を含む posts 変数を参照します。
for...of 構文を使用して、React でオブジェクトの配列をループ処理する
開発者は、前の例の for ループを、配列をループするための読みやすい新しい構文に置き換えることができます。
const posts = []
for (let post of postsArray){
posts.push(<div><h1>{post.title}</h1></div>)
}
これはより読みやすいアプローチです。 コードの他のすべての部分は同じままでかまいません。
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