HOWTO · React Native
React ネイティブ Foreach ループ
この記事では、foreach ループのように、配列または iterable を反復処理する方法を紹介します。
開発者は、React-native を使用しながら、配列などのオブジェクトを反復処理して小さなコンポーネントを作成する必要がある場合があります。 通常の JavaScript では、foreach ループを使用して各配列要素を反復処理できますが、React はこれをサポートしていません。
React で配列の要素を反復処理するには、他にもいくつかの方法があります。これについては、この記事で学習します。
map() メソッドを使用して、React-Native で配列を反復処理する
React-native では、配列の map() メソッドは foreach メソッドと同じように機能します。 すべての要素を反復処理し、ユーザーはすべての配列要素に対して何らかの操作を実行できます。
以下の例では、ユーザーへのウェルカム メッセージを含む配列名 message を作成しました。 map を使用して配列を反復処理し、Text コンポーネントを使用して配列のすべての要素をレンダリングします。
コード例:
import { StyleSheet, Text, View } from "react-native";
export default function App() {
const message = ["Welcome", "To", "DelftStack", "!"];
return (
<View>
<Text style={{ fontSize: 30 }}>
Displaying the Welcome Message Using the Map
</Text>{" "}
{/* Display all array elements in a single row */}
<View style={{ flexDirection: "row", }}>
{message.map((post) => {
return <Text style={{ fontSize: 20 }}>{post} </Text>;
})}
</View>
</View>
);
}
出力：
上記の出力では、すべての要素が 1 行に表示されていることがわかります。 開発者が map() メソッドを使用しない場合、message 要素 ごとに Text コンポーネントを作成する必要があり、コードが不明確になります。
map() メソッドを使用してオブジェクトの配列を反復処理する
それでは、配列の map() メソッドのリアルタイム使用について学習します。 開発者が、データベースから書籍のデータを取得し、書籍と著者を 1 行ずつ表示する必要があるアプリケーションを開発しているとします。
ここでは本のデータを取得していませんが、本の著者とタイトルを含むオブジェクトの配列を作成しています。 その後、本の詳細を含む Text コンポーネントを返す books 配列を参照して map() メソッドを使用します。
コード例:
import { StyleSheet, Text, View } from "react-native";
export default function App() {
const books = [
{
author: "jack",
Title: "Book 1",
},
{
author: "mack",
Title: "Book 2",
},
{
author: "Shubham",
Title: "Book 3",
},
{
author: "jem",
Title: "Book 4",
},
];
return (
<View>
<Text style={{ fontSize: 30 }}>
Showing the Book Title and its author name
</Text>{" "}
{/* Display all array elements one by one */}
<View>
{books.map((book) => {
return <Text style={{ fontSize: 20 }}>{book.Title} by {book.author}</Text>;
})}
</View>
</View>
);
}
出力：
まとめ
この記事では、読者は React Native で要素の配列を反復処理する方法を学びました。 ユーザーが return 部分内の配列を繰り返し処理したい場合は、map() メソッドを使用します。
それ以外の場合、ユーザーは foreach メソッドを使用できます。
