Задать вопрос
@PlasterTom
react

Как будет с ES6?

Ворпос по этому коду. Как записать в onDelete = this.props.onNoteDelete через ES6 да так, чтобы контекст не потерялся? 
render() {
    let onNoteDelete = this.props.onNoteDelete; 
    return(
    <div className="notes-grid" ref="grid">
            {this.props.notes.map(note => {
             return (
                <Note 
                key={note.id} 
                color={note.color}
                onDelete={onNoteDelete.bind(null, note)}> // и эта строка
                {note.text} 
                </Note>);   
            })
            }
    </div>
    )
 }
  • Вопрос задан
  • 96 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Можно так:
В компоненте в из которого передаете хандлер определяете его как inline arrow class function:
class Parent {
  onNoteDelete = note => {
    // some stuff
  };
}

Такие функции не теряют контекст. Либо, можно забиндить хандлер в конструкторе, как посоветовали выше.

Метод render:
render() {
  const { notes, onNoteDelete } = this.props; 
  
  return(
    <div className="notes-grid" ref="grid">
      {notes.map(note => (
        <Note 
          key={note.id} 
          color={note.color}
          onDelete={() => onNoteDelete(note)}
        >
          {note.text} 
        </Note>
       ))}
    </div>
  )
}


Для значений которые не переопределяются лучше использовать const, а не let. Так другие программисты будут сразу видеть, что значение не переопределяется и как следствие ваш код будет читаемей.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
RomReed
@RomReed
JavaScript, Flutter, ReactNative, Redux, Firebase 
render() {
    let onNoteDelete = this.props.onNoteDelete; 
    return(
    <div className="notes-grid" ref="grid">
            {this.props.notes.map(note => {
             return (
                <Note 
                key={note.id} 
                color={note.color}
                onDelete={()=>onNoteDelete.bind(null, note)}> // и эта строка
                {note.text} 
                </Note>);   
            })
            }
    </div>
    )
 }


или

constructor(props){
super(props)
this.onNoteDelete=this.onNoteDelete.bind(this)
}
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend React
Glob-com
от 100 000 ₽
React разработчик
Uptrade
от 150 000 до 200 000 ₽
JS|React Native разработчик
Венста • Киров
от 60 000 до 120 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Создание и публикация короткого (reels) UGC-видео на YouTube-канале
25 апр. 2024, в 01:46
500 руб./за проект
Настроить перехват https-трафика для android-приложения
25 апр. 2024, в 01:02
10000 руб./за проект
Программа (скрипт) для автоматизации торговли Solana
25 апр. 2024, в 00:45
100 руб./в час
Ещё заказы