هل من الخطأ أن أستخدم 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>
))}