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

کلیدها (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) در ReactJS – آموزش ReactJS اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.