javascript - 从 parent 到 child 的传递功能

Question

我的 javascript 有点弱。我从 this 中得到启发回答在 REACT 中将函数从父级传递给子级，我遇到了一点困难。

有人可以帮我更正我的代码吗？谢谢!

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 的一部分对象，现在你正在尝试传递 var 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