کلیدها (keys) در ReactJS – آموزش ReactJS

کلیدها keys در ReactJS 6155 تصویر

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

کلیدها در ReactJS در هنگام کار با لیست هایی که توسط کاربران تغییر یافته اند یا هنگام کار با کامپوننت هایی که به صورت پویا (dynamically) ایجاد شده اند، مفید هستند.

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

در این مثال ما به صورت پویا چند عنصر Content با index منحصر به فرد تولید می کنیم. تابع map با توجه به داده های موجود در state، سه عنصر div ایجاد خواهد کرد. از آن جا که مقدار کلید برای هر عناصر باید به صورت منحصر به فرد باشد، مقدار 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'));

خروجی مثال فوق برای مقدار کلید هر عنصر:

react keys example 6155 تصویر

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

نوشته کلیدها (keys) در ReactJS – آموزش ReactJS اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.

درباره نویسنده: administrator

ممکن است دوست داشته باشید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *