حلقه ها - لیست Lists در React

هدایت عباسی آموزش جاوا اسکریپت

در این بخش از آموزش React از تاپ سایت 98 قصد داریم به بحث حلقه ها - لیست Lists در React بپردازیم. یکی از مباحثی که در زبان های برنامه نویسی با آن آشنا می شوید حلقه ها هستند در ری اکت React نیز مبحثی بنام لیست Lists داریم که همین کار را انجام می دهد در زیر مثال هایی آورده ایم تا لیست ها را در ری اکت درک کنید. پس با ما باشید.

حلقه ها در React

برای آشنایی با حلقه ها یا لیست ها در React مثال زیر را مشاهده و اجرا کنید.

یک پروژه که در بخش های قبلی توضیح دادیم اجرا کنید. کد App.js را با /**/ کامنت کنید.

کد زیر را در آن قرار داده و اجرا نمایید. مشاهده می کنید یک ul اجرا و محتوا بصورت حلقه نمایش داده می شود. هر بار نیز یک مقدار دریافت و نمایش می دهند.

ابتدا در cars مقادیری (سه برند خودرو) را وارد کرده ایم. سپس با استفاده از map مقادیر را لیست کرده و بصورت li نمایش داده ایم. در هر Li یک مقدار دریافت کرده ایم.

import React from 'react';
import ReactDOM from 'react-dom';
function Car(props) {
return <li>I am a {props.brand}</li>;
}
function Garage() {
const cars = ['Ford', 'BMW', 'Audi'];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((a) => <Car brand={a}/>)}
</ul>
</>
);
}
export default function App() {
return (
<Garage/>
)
}
ReactDOM.render(<App />, document.getElementById('root'));

استفاده از Key در لیست یا حلقه

یکی دیگر از مباحثی که در این بخش با آن آشنا می شویم key می باشد که با یک مثال با آن آشنا می شویم.

همان طور که در مثال زیر مشاهده میکنید cars دارای دو مقدار میباشد که id یک عدد منحصربفرد است ما با استفاده از key مقدار id را دریافت میکنیم دقیقا مانند دستور For در php یا دیگر زبان های برنامه نویسی.

خروجی هر دو مثال یکی میباشد.

import React from 'react';
import ReactDOM from 'react-dom';
function Car(props) {
return <li>I am a { props.brand }</li>;
}
function Garage() {
const cars = [
{id: 1, brand: 'Ford'},
{id: 2, brand: 'BMW'},
{id: 3, brand: 'Audi'}
];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car key={car.id} brand={car.brand} />)}
</ul>
</>
);
}
export default function App() {
return (
<Garage/>
)
}
ReactDOM.render(<App />, document.getElementById('root'));

امیدواریم از این آموزش نیز لذت برده باشید.

موفق باشید.

این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید