بخش های اصلی

آموزش ReactJS

ReactJS – Keys

React Keys، در مواقعی کاربرد داره که با کامپوننت های پویای (dynamically) ایجاد شده کار می کنیم یا در مواقعی که لیست ها توسط کاربرها تغییر کرده باشن.  تنظیم مقدارِ key، کمک می کنه تا بعد از تغییرات، کامپوننت ها بصورت منحصر به فرد شناسایی بشن.

نحوه ی استفاده از Keyها

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

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 هر عنصر، خروجی به شکل زیر خواهد  بود:

react keys example

اگه بعداً تعدادی از عناصر را حذف کنیم یا تعدادی عنصر اضافه کنیم یا ترتیب عناصری که بصورت پویا (dynamically) ایجاد شدن را  تغییر بدیم، React برای حفظ کنترل و پیگیری هر یک از عناصر از مقادیرِ key استفاده خواهد کرد.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش ReactJS

Learn ReactJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد