javascript-将函数从父级传递给子级

我的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> 
    );
  }
});

我得到的错误：

解决方法:

您需要通过引用作为列表对象一部分的方法.deleting,现在您正尝试通过var test = List.deleting;.那是不确定的.为了在.map中引用List,您应该自己为.map设置此名称-只需将第二个参数传递给我们(在我们的示例中,原因是此方法在render方法中引用List),并传递给方法this.deleting的del =属性引用.

还要为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

标签：reactjs,parent-child,javascript
来源： https://codeday.me/bug/20191027/1945101.html