Adam Ebrahim نشر 21 مارس 2021 أرسل تقرير مشاركة نشر 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؟ وإن كان كذلك ما هي الطريقة الأفضل لأمر كهذا؟ اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mohammed Saber6 نشر 21 مارس 2021 أرسل تقرير مشاركة نشر 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> ))} 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Adam Ebrahim
أقوم بإستخدام lint في مشروع react ويظهر لي الخطأ التالي:
error JSX props should not use arrow functions react/jsx-no-bind
وأعتقد أن هنا سبب المشكلة (في onClick):
هل من الخطأ أن أستخدم inline arrow functions في JSX props؟ وإن كان كذلك ما هي الطريقة الأفضل لأمر كهذا؟
رابط هذا التعليق
شارك على الشبكات الإجتماعية
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.