将函数从 parent 传递到 child

Question

我 javascript 有点弱。我从 this 的答案中得到启发，在 REACT 中将函数从 parent 传递到 child，但我遇到了一点困难。

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

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。为了 .map 中的 this，指的是 List，你应该自己为 .map 设置 this - 这样做只是通过（在我们的例子中它应该是 this 因为 render 方法中的 this 指的是 List) 第二个参数给 .map，并传递给 del= 方法 this.deleting 的属性引用.

还为 ListItem 和 React all tags must be closed 设置了 key 属性 - 所以添加 />（现在你得到了错误，因为你没有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

将函数从 parent 传递到 child

Pass function from parent to child

javascript

parent-child

reactjs