هل من الخطأ أن أستخدم inline arrow functions في JSX props؟

Adam Ebrahim · 21 مارس 2021

أقوم بإستخدام lint في مشروع react ويظهر لي الخطأ التالي:

error    JSX props should not use arrow functions        react/jsx-no-bind

وأعتقد أن هنا سبب المشكلة (في onClick):

{this.state.people.map(tile => (
  <span key={tile.img}>
    <Checkbox onCheck={() => this.selectPerson(tile)} />
                       
    <GridTile actionIcon={<IconButton onClick={() => this.handleDelete(tile)}><Delete color="red"/></IconButton>}>
      <img onClick={() => this.handleOpen(tile.img)} src={tile.img} />
    </GridTile>
  </span>
))}

هل من الخطأ أن أستخدم inline arrow functions في JSX props؟ وإن كان كذلك ما هي الطريقة الأفضل لأمر كهذا؟

Mohammed Saber6 · 21 مارس 2021

هذا النمط يؤذي ال performance لأن الدالة سيتم إنشاؤها في كل مرة مع كل render وبالتالي في حالتك سيتم إنشاء المكون IconButton - Checkbox - img دائماً مع كل render ولحل هذه المشكلة فقط قم بالإشارة إليها هكذا

selectPerson = tile => {
	// قم بعمل ما تريد
}

handleDelete = tile => {
	// قم بعمل ما تريد
}

handleOpen = img => {
 // قم بعمل ما تريد
}


{this.state.people.map(tile => (
  <span key={tile.img}>
    <Checkbox onCheck={this.selectPerson(tile)} />
                       
    <GridTile actionIcon={<IconButton onClick={this.handleDelete(tile)}><Delete color="red"/></IconButton>}>
      <img onClick={this.handleOpen(tile.img)} src={tile.img} />
    </GridTile>
  </span>
))}

هل من الخطأ أن أستخدم inline arrow functions في JSX props؟

السؤال

Adam Ebrahim

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

Mohammed Saber6

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية