List ها در ری اکت

امید کیانی 709 بازدید 1398/07/17
List ها در ری اکت

لیست ها برای نمایش داده ها در یک لیست مرتب استفاده می شوند و به طور عمده برای نمایش منوها در وبسایت ها استفاده می شوند.

در react لیست ها می توانند شبیه به لیست هایی که ما در javascript ایجاد می کنیم،ایجاد شوند.

در javascript تابع ()map برای پیمایش لیست ها استفاده می شود.در مثال زیر تابع ()map یک آرایه از اعداد را گرفته و مقادیر آنها را در عدد ۵ ضرب می کند،سپس ما آرایه ی جدیدی را که توسط تابع ()map به ما بازگشت داده شده است را به متغیر multiplyNums اختصاص می دهیم.

مثال:

var numbers = [1, 2, 3, 4, 5];   
const multiplyNums = numbers.map((number)=>{   
    return (number * 5);   
});   
console.log(multiplyNums);

خروجی:

کد javascript بالا خروجی را درون کنسول به ما نمایش می دهد.

[5, 10, 15, 20, 25]

اکنون می خواهیم ببینیم چطور یک لیست را درون react ایجاد کنیم.برای انجام آن ما از تابع ()map برای پیمایش لیست ها استفاده می کنیم و برای بروزرسانی،آنها را درون {} curly braces قرار می دهیم و عناصر آرایه را به listitems اختصاص می دهیم.در نهایت لیست جدید را درون تگ </ul><ul> قرار داده و به DOM ارائه می دهیم.

مثال:

import React from 'react';   
import ReactDOM from 'react-dom';   
  
const myList = ['Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa'];   
const listItems = myList.map((myList)=>{   
    return <li>{myList}</li>;   
});   
ReactDOM.render(   
    <ul> {listItems} </ul>,   
    document.getElementById('app')   
);   
export default App;

خروجی:

Render کردن لیست ها درون کامپوننت ها

در مثال قبل ما به طور مستقیم یک لیست را درون DOM، رندر کردیم،اما آن راه خوبی برای رندر کردن لیست ها در react نیست.

همانطور که قبلا اشاره کردیم همه عوامل در ری اکت تحت عنوان component تعریف می شوند،از این رو ما نیاز به render کردن لیست درون یک کامپوننت داریم.برای فهم بیشتر این موضوع به مثال زیر توجه کنید:

مثال:

import React from 'react';   
import ReactDOM from 'react-dom';   
  
function NameList(props) {  
  const myLists = props.myLists;  
  const listItems = myLists.map((myList) =>  
    <li>{myList}</li>  
  );  
  return (  
    <div>  
        <h2>Rendering Lists inside component</h2>  
              <ul>{listItems}</ul>  
    </div>  
  );  
}  
const myLists = ['Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa'];   
ReactDOM.render(  
  <NameList myLists={myLists} />,  
  document.getElementById('app')  
);  
export default App;

خروجی:

 

دیگر مقالات
امید کیانی 331 بازدید 1398/07/15
حمید تیموری 1054 بازدید 1397/10/22
امید کیانی 846 بازدید 1398/05/11
حمید تیموری 1382 بازدید 1397/11/10
حمید تیموری 695 بازدید 1397/10/15


نظرات (0)
هنوز نظری ثبت نشده است
برای ثبت نظر ابتدا وارد سایت شوید