آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

کلیدها Keys در ReactJS

دوره های مرتبط با این مقاله

کلیدها(Keys) در ReactJS

کلیدهای ReactJS، زمان کار با اجزایی که به صورت پویا ایجاد شده اند و یا در مواقعی که لیست های شما توسط کاربران تغییر داده شده اند، مفید هستند. با تنظیم مقدار key می توانید بعد از تغییرات منحصر به فرد بودن اجزای خود را حفظ کنید.


استفاده از کلیدها

بیایید به صورت پویا عناصر Content را به همراه ایندکس منحصر به فرد (i) ایجاد کنیم. تابع map سه عنصر را از آرایه ی data ما ایجاد خواهد کرد. با توجه به اینکه مقدار key برای تمامی عناصر باید منحصر به فرد باشد، برای هر یک از عناصر ایجاد شده i را به عنوان یک کلید تعیین می کنیم.
App.jsx

import React from 'react';
class App extends React.Component {
   constructor() {
      super();
		
      this.state = {
         data:[
            {
               component: 'First...',
               id: 1
            },
            {
               component: 'Second...',
               id: 2
            },
            {
               component: 'Third...',
               id: 3
            }
         ]
      }
   }
   render() {
      return (
         < div >
            < div >
               {this.state.data.map((dynamicComponent, i) = > < Content 
                  key = {i} componentData = {dynamicComponent}/ >)}
            < /div >
         < /div >
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         < div >
            < div >{this.props.componentData.component}< /div >
            < div >{this.props.componentData.id}< /div >
         < /div >
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(< App/ >, document.getElementById('app'));

نتیجه ی زیر برای مقادیر Key هر یک از عناصر نمایش داده می شود.


کلیدها(Keys) در ReactJS

اگر در آینده برخی از عناصر را حذف کنیم، آن ها را اضافه کنیم یا ترتیب عناصری که به صورت پویا ایجاد شده اند را تغییر دهیم، ReactJS برای حفظ ردگیری هر یک از عناصر از مقادیر key استفاده خواهد کرد.


برای مطالعه سرفصل دوره آموزش عملی و کاربردی ReactJS کلیک نمایید .


  • 158
  •    162
  • تاریخ ارسال :   1397/10/19

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .