آموزش ReactJS – فصل دوازدهم: کلیدها (Keys)

همان طور که گفتیم، کلید ها در زمانی که می خواهیم با کامپوننت های داینامیک کار کنیم کاربرد دارند.

تعریف کردن کلید برای کامپوننت هایی که از روی آرایه ساخته اند، بسیار مهم است. در صورتی که از کلید یکتا استفاده نکنید، در صورت حذف و آپدیت کامپوننت ها، اتفاقاتی عجیبی در صفحات رخ خواهد داد.

در هنگامی که احتیاج داشته باشیم چندین کپی از یک کامپوننت با دیتاهای مختلف داشته باشیم، می توانیم کامپوننت ها را به صورت داینامیک ایجاد کنیم.

ایجاد داینامیک کامپوننت ها را می توانید در مثال زیر مشاهده کنید.

این کد های فایل 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;

فصل 12 – مثال 1 (فایل App.jsx)

این کد های فایل index.js خواهد بود:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('root'));

فصل 12 – مثال 1 (فایل index.js)

در مثال بالا ما با متود map با استفاده از اطلاعات درون یک آرایه، تعدادی کامپوننت ایجاد کرده ایم. برای کمک به ReactJS در درک و پی گیری راحت تر کامپوننت ها، از key = {i} استفاده شده است.

از آنجایی که i همیشه یکتا خواهد بود برای استفاده به عنوان کلید بسیار مناسب است.

ما باید نام کلید ها را همیشه به صورت کاملا یکتا انتخاب کنید. البته نام کلید ها فقط باید در آن آرایه یکتا باشند.

مثال بالا چنین چاپ خواهد شد:

زمانی که یکی از این کامپوننت ها از صفحه حذف شود یا به دست کاربر بروزرسانی شود، ری اکت متوجه خواهد شد.

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