Функция перехода от родителя к дочернему

Question

Я немного слаб в javascript. Я вдохновляю себя от this Ответ, чтобы передать функцию от родителя к ребенку в РЕАКТ, и у меня есть небольшая трудность.

Может ли кто-нибудь помочь мне исправить свой код? Спасибо!

var List = React.createClass({ 
    deleting: function(test){ 
    console.log(test); 
    }, 
    render: function() {  
    var all = this.props.activities; 
    var test = List.deleting; 
    var list = all.map(function(a){ 
     return (<ListItem act={a} del={test}>); 
    }); 

    return (
     <ul> {list} 
     </ul> 
    ); 
    } 
}); 

var ListItem = React.createClass({ 
    deleting: function(e){ 
    this.props.del(e.target.parentNode.firstChild.innerHTML); 
    }, 
    render: function(){ 
    return (
     <li key={this.props.act}>{this.props.act} 
     <div onClick={this.deleting}>X</div> 
     </li> 
    ); 
    } 
}); 

Я получаю ошибку:

Answer 1

Вам необходимо пройти ссылку на метод .deleting, который является частью List объекта, теперь вы пытаетесь пройти вар test = List.deleting;, который undefined. Для того, чтобы this в .map, относится к List, вы должны установить this для .map самостоятельно - сделать это просто передать (в нашем случае это должно быть this потому this в визуализации метод относится к List) второй аргумент .map, и перейти к del= ссылка на метод this.deleting.

Также установите key атрибут для ListItem, а в React all tags must be closed - так добавить /> (теперь вы получаете сообщение об ошибке, потому что вы не закрыли тег ListItem) в конце ListItem тега

var List = React.createClass({ 
    deleting: function(test) { 
    console.log(test); 
    }, 

    render: function() {  
    var all = this.props.activities; 
    var list = all.map(function(a) { 
     return (<ListItem key={a} act={a} del={this.deleting} />); 
    }, this); 

    return <ul> {list} </ul> 
    } 
}); 

Example