реквизиты как ответ на родительский элемент parent в response.js

Question

Я знаю, как установить обратный вызов, используя реквизиты для родительского компонента. Я делаю это как в официальном учебнике. Но предположим, что я хочу передать реквизиты родителям родителя. Предположим, у меня есть компоненты следующим образом:

AllergyBox 
 
    AllergiesList 
 
    Allergy 
 

Я хочу осуществить аллергии функцию удаления. AllergyBox владеет состоянием списка аллергии и передает его в качестве опоры. Когда нажата кнопка удаления аллергии, я хочу удалить эту аллергологию и обновить пользовательский интерфейс. Так что я стараюсь:

var Allergy = React.createClass({ 
 
    deleteAllergy: function(e){ 
 
     e.preventDefault(); 
 
     var allergy_id = this.props.id; 
 
     this.props.onAllergyDelete({ 
 
      id: allergy_id 
 
     }); 
 
    }, 
 
    render: function(){ 
 
     return(
 
      <li>{this.props.name} <a href="#" onClick={this.deleteAllergy}> </a></li> 
 
     ) 
 
    } 
 
});

И Список Allergy выглядит так:

var AllergiesList = React.createClass({ 
 
    getDefaultProps: function(){ 
 
     return {allergies: []} 
 
    }, 
 
    sendAllergyDelete: function(id){ 
 
     this.props.onSendAllergyDelete({ 
 
      id: id 
 
     }) 
 
    }, 
 
    render:function(){ 
 
     var allergies = this.props.allergies.map(function(allergy){ 
 
      return(
 
       <Allergy name={allergy.name} key={allergy.id} id={allergy.id} onAllergyDelete={this.sendAllergyDelete} /> 
 
      ) 
 
     }); 
 
     return(
 
      <ul> 
 
       {allergies} 
 
      </ul> 
 
     ) 
 
    } 
 
});

И у меня есть компонент AllergyBox, который должен обрабатывать мое удаление:

var AllergyBox = React.createClass({ 
 

 
    getInitialState: function(){ 
 
     return { 
 
      allergiesList: [], 
 
      form: [] 
 
     } 
 
    }, 
 
    
 
    handleAllergyDelete: function(id){ 
 
     alert(id); 
 
    }, 
 
    render: function(){ 
 
     return(
 
      <div className="allergies"> 
 
       <AllergiesList allergies={this.state.allergiesList} onSendAllergyDelete={this.handleAllergyDelete} /> 
 
      </div> 
 
     ) 
 
    } 
 
});

Но у меня есть ошибки в компоненте аллергии:

this.props.onAllergyDelete is not a function

Я новичок в React, так что я не знаю, что это лучшее решение передать что-то через иерархию компонентов.

Answer 1

Вам необходимо установить this для .map в AllergiesList, так как по умолчанию this в .map обратного вызова относится к глобальной области видимости (в браузере это window), или если вы используете strict mode это будет undefined. Когда вы проходите this.sendAllergyDelete в качестве аргумента, вы не передаете ссылку на функцию - вы передаете window.sendAllergyDelete, что равное undefined, потому что в window нет sendAllergyDelete функции

var allergies = this.props.allergies.map(function(allergy) { 
    return (
    <Allergy 
     name={allergy.name} 
     key={allergy.id} 
     id={allergy.id} 
     onAllergyDelete={this.sendAllergyDelete} /> 
) 
}, this); 
    ^^^^ 

Answer 2

Хорошо, я нашел решение.

var that = this; 
 
var allergies = this.props.allergies.map(function(allergy){ 
 
    return(
 
     <Allergy onAllergyDelete={that.handleAllergyDelete} name={allergy.name} key={allergy.id} id={allergy.id} /> 
 
     ) 
 
});

Я объявил переменную, чтобы быть равным этому (компонент). Итак, внутри .map я мог бы использовать this.handleAllergyDelete.