Как будет с ES6?

Question

[PlasterTom]

Ворпос по этому коду. Как записать в 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>
    )
 }

Answer 1

[Антон Спирин]

Можно так:
В компоненте в из которого передаете хандлер определяете его как 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. Так другие программисты будут сразу видеть, что значение не переопределяется и как следствие ваш код будет читаемей.

Answer 2

[Роман Александрович]

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)
}

Comments

[Антон Спирин]

В первом варианте, вы вызваете функцию полученную из props и биндите на null.
Если она до этого не забинжена на контекст компонента из которого передается, контекст будет null.

Далее, вы оборачиваете вызов bind в стрелочную функцию. Во время вызова просто вернется новая функция с контекстом null и зашитым аргументом. Вызвана она не будет.